この記事は、ラクスパートナーズ AdventCalendar 2025の13日目の記事です。
（個人で25日連続投稿にチャレンジ中のカレンダーになります）
何番煎じ？という感じですが、今回は自分の振り返りも込めてLocal StorageとSession Storageについてまとめたいと思います。
Web Storage APIとは
Web Storage APIとは、ブラウザ上で値を保存できるAPIです。
キーと値を一つのセットとして保存することができます。
Web Storage APIは、Local StorageとSession Storageの2種類に分けられます。
Session Storage
特徴
Session Storageの特徴は以下です。
- ブラウザを閉じるまではデータを保持できる
- ストレージの上限は約5MB
- 同じオリジン内の全てのウィンドウ、タブで値が共有される
※ オリジンとは、スキーム （プロトコル）、 ホスト （ドメイン）、 ポート番号で定義されています。これら3点が全く同じであれば、同一のオリジンとしてみなされます。
https://developer.mozilla.org/ja/docs/Glossary/Origin
使い方
以下のように使うことができます。
引用元
// sessionStorage にデータを保存
sessionStorage.setItem("name", "Tom");
// sessionStorage に保存したデータを取得
const name = sessionStorage.getItem("name");
// sessionStorage に保存したデータを削除
sessionStorage.removeItem("name");
// sessionStorage からすべての保存したデータを削除
sessionStorage.clear();
上記のようにsessionStorage.setItem(キー名, 値);という形式で使用します。
取得や削除は
sessionStorage.getItem(キー名);
sessionStorage.removeItem(キー名);
のようにキー名を使います。
まとめて削除したいときはsessionStorage.clear();を実行します。
Local Storage
特徴
Local Storageの特徴は以下です。
- 意図的に消さない限り、永続的にデータを保存できる（ブラウザを閉じても保持される）
- ストレージの上限は約5MB（Session Storageと同じ）
- 同じオリジン内の全てのウィンドウ、タブで値が共有される（Session Storageと同じ）
使い方
// localStorageにデータを保存
localStorage.setItem("name", "Tom");
// localStorageに保存したデータを取得
const name = localStorage.getItem("name");
// localStorageに保存したデータを削除
localStorage.removeItem("name");
// localStorageからすべての保存したデータを削除
localStorage.clear();
こちらも使い方はSession Storageと同じなので省略いたします。
共有の注意点
Web Storageには文字列で保存される
Web Storageは、どんな値も文字列で保存されます。
例えば、オブジェクトをそのままWeb Storageに保存すると、取得した時に[object Object]となってしまい、データを使用することができません。
そのため、JSON.stringify()とJSON.parse()を使用します。
const person = { name: "Alex" };
// 誤ったやり方
localStorage.setItem("user", person);
console.log(localStorage.getItem("user")); // "[object Object]" になってしまう
// 正しいやり方
localStorage.setItem("user", JSON.stringify(person));
console.log(JSON.parse(localStorage.getItem("user"))); // { name: "Alex" }
上記のように
- Web Storageへ保存する際は
JSON.stringify(値)で値を文字列に変換する - Web Storageから値を取得する際は
JSON.parse(値)で文字列に変換した値を再びJSONに変換する
といった変換処理を行う必要があります。
割と抜かれる
Local StorageとSession Storageどちらにも共通することですが、どちらも割と簡単に第三者からデータの中身を抜かれるそうです。
そのため、重要な情報（ユーザーの個人情報やID、パスワードなど）はWeb Storageに保存しないよう気をつける必要があります。
以上となります。
Web Storageは便利な機能ではありますが、簡単に抜かれるので、重要な情報は保存しないように気をつけたいですね。
ここまで読んでいただきありがとうございました。