ブラウザストレージ徹底解説:localStorage と sessionStorage の使い方マスター

Webアプリケーションで扱うデータを管理するために、必ずしもデータベースが必要だというわけではありません。実は、ブラウザ自体が持つストレージ機能を活用すれば、サーバー側の仕組みなしにデータを保存できます。

このBrowser Storage(ブラウザストレージ)機能は、Chrome(バージョン4以降)、Mozilla Firefox(バージョン3.5以降)、Internet Explorer(バージョン8以降)はもちろん、iOS や Android のブラウザを含む幅広い環境でサポートされています。

ブラウザストレージには、主に次の2つの選択肢があります。

• localStorage:データを永続的に保存できる
• sessionStorage:セッション(タブやウィンドウ)が閉じられるまでデータを保持する

localStorage とは

localStorage オブジェクトに保存したデータは、ブラウザを一度閉じて再度開いても残り続けます。設定情報やユーザーの好みなど、長期的に保持したいデータの保存に適しています。

データを保存する(setItem)

localStorage にアイテムを保存するには、setItem() メソッドを使用します。このメソッドには「キー」と「値」の2つの引数を渡す必要があります。

// 例:キー "mykey" に値 "myvalue" を保存
localStorage.setItem("mykey", "myvalue");

データを取得する(getItem)

保存したデータを localStorage から取り出すには、getItem() メソッドを使います。取得したいデータのキーを引数として渡してください。

// 例:"mykey" に対応する値を取得
localStorage.getItem("mykey");

特定のデータを削除する(removeItem)

localStorage から個別のアイテムを削除したい場合は、removeItem() メソッドを使用します。削除対象のキーを引数として渡します。

// 例:"mykey" のデータを削除
localStorage.removeItem("mykey");

すべてのデータを消去する(clear)

localStorage の内容をすべて一括でクリアしたい場合は、clear() メソッドを呼び出します。

// 例:localStorage の全データを消去
localStorage.clear();

sessionStorage とは

sessionStorage オブジェクトに保存されたデータは、ユーザーがブラウザ(またはタブ)を閉じるまで保持され、閉じた時点でストレージは自動的にクリアされます。一時的な状態の保存や、ページ遷移間でのデータ受け渡しなどに便利です。

データを保存する(setItem)

sessionStorage にアイテムを保存する場合も、setItem() メソッドを使用します。

// 例:キー "mykey" に値 "myvalue" を保存
sessionStorage.setItem("mykey", "myvalue");

データを取得する(getItem)

sessionStorage からデータを取り出すには、getItem() メソッドにキーを渡します。

// 例:"mykey" に対応する値を取得
sessionStorage.getItem("mykey");

特定のデータを削除する(removeItem)

sessionStorage から個別のアイテムを削除するには、removeItem() メソッドを使用します。

// 例:"mykey" のデータを削除
sessionStorage.removeItem("mykey");

すべてのデータを消去する(clear)

sessionStorage の内容を完全にクリアするには、clear() メソッドを使用します。

// 例:sessionStorage の全データを消去
sessionStorage.clear();

配列を localStorage / sessionStorage に保存する方法

ブラウザストレージに保存できるのは単一の値だけではありません。配列の中身も保存することが可能です。

ここでは、数値が入った配列を例に見ていきましょう。

var ourArray = [1, 2, 3, 4, 5];

この配列を setItem() メソッドを使って localStorage に保存します。

localStorage.setItem("ourarraykey", JSON.stringify(ourArray));

sessionStorage の場合は次のようになります。

sessionStorage.setItem("ourarraykey", JSON.stringify(ourArray));

ポイントは、配列をそのまま保存できないため、文字列に変換してから保存することです。上記の例では、JSON.stringify() メソッドを使って配列を JSON 形式の文字列に変換しています。

保存した配列を取り出す

localStorage や sessionStorage からデータを取得したら、今度は文字列を元の配列に戻す必要があります。これには JSON.parse() メソッドを使用します。

var storedArray = localStorage.getItem("ourarraykey");
ourArray = JSON.parse(storedArray);

sessionStorage の場合は以下のとおりです。

var storedArray = sessionStorage.getItem("ourarraykey");
ourArray = JSON.parse(storedArray);

まとめ

localStorage と sessionStorage は、どちらも同じ API(setItem / getItem / removeItem / clear)で操作できる手軽なデータ保存手段です。「永続的に残したいなら localStorage」「セッション中だけでよいなら sessionStorage」というように、用途に応じて使い分けることで、データベースに頼らずとも効率的にデータ管理が行えます。

無料でプログラミングを学ぼう。freeCodeCamp のオープンソースカリキュラムは、これまでに 40,000 人以上の人々を開発者としての就職へと導いてきました。さあ、学習を始めましょう。