localStorageを使ってブラウザにデータを保存する

概要

localStorageを使用することで、ブラウザにデータを保存し、同じブラウザでページを再訪した際に、保存されていたデータを使用することができます。

用途例

一例ですが、以下のような場合など。
- ２回目以降の訪問時には、特定のコンテンツを表示させない
- ポップアップウィンドウなどで「次回以降は表示させない」チェックを入れて閉じると、次回以降表示させない

使用する際の注意点

• 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が利用可能かを判定する。

index.js

  if (!window.localStorage) {
    console.log("localstorage非対応");
    return;
  }

localStorageにデータを保存する。

index.js

  let key = 'testKey';
  let val = 'hogehoge';
  window.localStorage.setItem(key, val);

localStorageからデータを取得する。

index.js

  let key = 'testKey';
  let getValue =  window.localStorage.getItem(key);
  console.log(getValue);

localStorageから、あるKeyのデータを削除する。

index.js

  window.localStorage.removeItem(key);

localStorageから、全てのデータを削除する。

index.js

  window.localStorage.clear();

連想配列（JSONデータ）を格納する場合

ひとつのkeyに対して、複数データを保存したい場合は、連想配列でデータを定義し、JSON.stringify()で文字列型に変換してから格納する。

index.js

  let key = 'testKey';
  let data = {
    'data1': 'hoge',
    'data2': 'huga'
  };
  let val = JSON.stringify(data);
  window.localStorage.setItem(key, val);

データを取得する際は、 JSON.parse()で文字列型から連想配列に変換します。

index.js

  let getVal = window.localStorage.getItem(key);
  let getData = JSON.parse(getVal);
  console.log(getData.data1);  //'hoge'
  console.log(getData.data2);  //'huga'

JSON.parse()を使用する際は、エラー処理を入れておくとベターです。

index.js

  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」→ ドメイン名 を選択すると表示されます。

参考