理系公務員のプログラミング日記

ブラウザが提供するWeb Storage APIを使えば、ローカルストレージにデータを保存し、画面をリロードした後もデータを再利用できます。

身近なところでは、Amazon で閲覧履歴をローカルストレージに保存し商品の推薦などに用いており、その様子はdevtools の Application タブで確認できます。

window.localStorageは永続的にデータを保持します。

window.sessionStorageはページを閉じてセッションを終了するまでデータを保持します。

この２つは使い方は同じなので、以下では localStorage でサンプルを記載します。

（なお、この window は JavaScript のグローバルオブジェクトというもので、実装する際は省略可能です。）

localStorage からデータを保存する

ローカルストレージにデータを保存するには、localStorage.setItem('キー','値')を使います。

ここで JavaScript のオブジェクトはローカルストレージにそのまま保存できないので、JSON.stringifyを使って文字列に変換する必要があります。

// localStorageにデータを保存
localStorage.setItem('a', 'apple');

// localStorageにオブジェクトを保存
localStorage.setItem('a', JSON.stringify(SomeObject));

localStrage からデータを取得する

データを取得するには、localStorage.getItem('キー')を使います。

ここでもオブジェクトを取得する場合は、JSON.parseを使って文字列をオブジェクトに復元する必要があります。

// localStorageから指定したキーのデータを取得
const apple = localStorage.getItem('a');

// localStorageから指定したキーのオブジェクトを取得
const SomeObject = JSON.parse(localStorage.getItem('a'));

データの取得と保存の処理を関数にする

データの取得と保存の処理を頻繁に行う場合は、関数にしておくと良いです。

// ローカルストレージにデータを書き込む
const saveJSON = (key, data) => localStorage.setItem(key, JSON.stringify(data));
// ローカルストレージからデータを取得する
const loadJSON = (key) => key && JSON.parse(localStorage.getItem(key));

localStorage からデータを削除する

データの削除には、removeまたはclearを使用します。

// localStorageから指定したキーのデータを削除
localStorage.remove('a');

// localStorageから全てのデータを削除
localStorage.clear();

localStorage が保存する全てのデータを取得する

これには固有のメソッドが存在しないので、実装する必要があります。

参考：JavaScript: localStorage のすべてのキーを列挙する

for文を使う方法

for文を使う素直な方法です。

const Object_list = [];

for (let i = 0; i < localStorage.length; i++) {
  // キーを取得
  const key = localStorage.key(i);
  // 値を取得
  const value = localStorage.getItem(key);
  // ループ外に作った配列に追加して保存
  Object_list.push({ key, value });
}

Object.keysを使う方法

こちらは少しテクニカルなオブジェクトのキーを取得できるObject.key()を使う方法です。

実行速度ではこちらの方が早いそうですが、どちらでも良いと思います。参考までに。

const Object_list = [];

Object.keys(localStorage).forEach( key => {
    Object_list.push({key,localStorage.getItem(key)})
})