#概要
localStorageを使用することで、ブラウザにデータを保存し、同じブラウザでページを再訪した際に、保存されていたデータを使用することができます。
##用途例
一例ですが、以下のような場合など。
- 2回目以降の訪問時には、特定のコンテンツを表示させない
- ポップアップウィンドウなどで「次回以降は表示させない」チェックを入れて閉じると、次回以降表示させない
##使用する際の注意点
-
key
とValue
のセットでブラウザにデータが保存される - 格納きる値は、文字列(String型)データのみ
- 複数データをまとめて保存する場合は連想配列(JSONデータ)を文字列に変換して格納するとよい
- 格納可能な容量は5Mbyteまで
- ブラウザに保存された値はJavaScriptでアクセスが可能なため、セキュリティ上問題ないデータのみを格納すること
##セッションストレージ / ローカルストレージ の違い
以下、引用。
https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
- セッションストレージ (
sessionStorage
) は、各オリジン毎に分割された保存領域を管理し、これはページセッションの間 (ブラウザーを開いている間、ページの再読み込みや復元を含む) に使用可能です。 - ローカルストレージ (
localStorage
) も同様ですが、こちらはブラウザーを閉じたり再び開いたりしても持続します。
#LocalStoage 基本操作
##保存/取得/削除
localStorageが利用可能かを判定する。
if (!window.localStorage) {
console.log("localstorage非対応");
return;
}
localStorage
にデータを保存する。
let key = 'testKey';
let val = 'hogehoge';
window.localStorage.setItem(key, val);
localStorage
からデータを取得する。
let key = 'testKey';
let getValue = window.localStorage.getItem(key);
console.log(getValue);
localStorage
から、あるKeyのデータを削除する。
window.localStorage.removeItem(key);
localStorage
から、全てのデータを削除する。
window.localStorage.clear();
##連想配列(JSONデータ)を格納する場合
ひとつのkeyに対して、複数データを保存したい場合は、連想配列でデータを定義し、JSON.stringify()
で文字列型に変換してから格納する。
let key = 'testKey';
let data = {
'data1': 'hoge',
'data2': 'huga'
};
let val = JSON.stringify(data);
window.localStorage.setItem(key, val);
データを取得する際は、 JSON.parse()
で文字列型から連想配列に変換します。
let getVal = window.localStorage.getItem(key);
let getData = JSON.parse(getVal);
console.log(getData.data1); //'hoge'
console.log(getData.data2); //'huga'
JSON.parse()
を使用する際は、エラー処理を入れておくとベターです。
try {
let getData = JSON.parse(getVal);
console.log(getData.data1); //'hoge'
console.log(getData.data2); //'huga'
} catch(e) {
// エラー時の処理
console.log(e); // SyntaxError: Unexpected token h in JSON at position 0
}
##ブラウザでの確認方法
ブラウザの開発者ツールなどで、保存されている値を確認できます。
下記はChromeの場合の例です。
「Application」タブ →「Storage」→「Local Storage」→ ドメイン名 を選択すると表示されます。
#参考