6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-08-25

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

##用途例
一例ですが、以下のような場合など。

  • 2回目以降の訪問時には、特定のコンテンツを表示させない
  • ポップアップウィンドウなどで「次回以降は表示させない」チェックを入れて閉じると、次回以降表示させない

##使用する際の注意点

  • keyValueのセットでブラウザにデータが保存される
  • 格納きる値は、文字列(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」→ ドメイン名 を選択すると表示されます。
screenshot_localStorage.png

#参考

6
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?