JavaScript | localStorageへのデータ保存と取得・破棄、注意点など

JavaScriptを使ってlocalStorageにデータを保存する方法と、保存したデータを取得、または保存されているデータを破棄する方法です。

また、有効期限やデータの保存量制限、その他注意点も紹介しています。

localStorageが使えるか確認する

localStorageの処理を実装する場合、window.localStorageでアクセスしているブラウザがlocalStorageが使えるか確認処理を記述して、使える場合のみに処理を実装します。

if (window.localStorage) {
		//localStorageの処理
}

localStorageへデータを保存するにはlocalStorage.setItem()を利用します。

localStorage.setItem()は保存するデータのキー名と文字列データを設定して実行します。

localStorage.setItem('key', 'data');

localStorageへ配列・オブジェクト型のデータを保存するには、配列をJSONコードにシリアライズし、文字列として保存することで実装可能です。

連想配列、多次元配列やオブジェクト型も可能です。

let data = ['data1','data2'];
let json = JSON.stringify(data, undefined, 1);
localStorage.setItem('key', json);

localStorageからデータを取得するにはgetItem()を利用します。

getItem()のオプション引数には取得するデータのキー名を指定します。

let data = localStorage.getItem('key');

localStorageにJSONデータとして保存したデータを取得して配列・オブジェクト型データに戻す方法です。

let data = localStorage.getItem('key');
data = JSON.parse(data);

文字列データの有無を先に確認する必要がない場合、一行で記述しても問題ありません。

let data = JSON.parse(localStorage.getItem('key'));

ユーザーのブラウザに保存されているlocalStorageのデータを破棄するにはremoveItem()やStorage.clear()が利用可能です。

破棄・削除できるデータは、アクセスしているドメインURLと同一のドメイン下にあるデータに限ります。

removeItem()はキー名から保存されている個別のデータ単位でデータを削除します。

localStorage.removeItem('key');

Storage.clear()は同一ドメイン下に保存されているデータを全て削除したい場合に利用します。

storage.clear();

localStorageには有効期限はありません。

ユーザーがブラウザの機能を利用してデータを削除するか、removeItem()やStorage.clear()が実行された場合のみデータが破棄されます。

リファラー情報など一時的なデータ保持として利用したい場合は、ブラウザが閉じられた際に自動的にデータが破棄されるsessionStorageを利用することで実装可能です。

localStorageのに保存可能な文字数期限はブラウザ毎に異なっていて、主要なブラウザでは最大5MBとなっています。

これは、キー名単位ではなくドメイン単位での文字数制限となります。

含むドメイン変更を伴うサイト移転時はデータが保持できません。

これはHTTPからHTTPSへの変更時も含まれます。

サイト移転時にデータの保持が必要な場合は、一旦データとセッション情報をデータベースに保存して新URLで取り出すか、新しいURLへの移動時にデータを付与するなどの処理を追加する必要があります。

また、サーバー移転など同一ドメインでのサイト移転であれは、データは保持されたままで利用することが可能です。

localStorageのデータは別ドメインからの参照は不可能となっていますが、悪意のあるサイトユーザーが存在した場合、ドメイン下であればJavaScriptを使ってアクセスされてしまう可能性があります。

ユーザーが書き込めるフォームがサイト内に存在する場合など、書き込まれた内容のチェックを厳格にしたり、localStorageに保持するデータに重要なデータは含めないようにする必要があります。

localStorageは性質上、同期処理となっています。

データの保存量制限を意識するレベルの大きなデータを扱う場合は、サイトパフォーマンスにも影響する可能性がありますので注意が必要です。

Posted by Yousuke.U