Webブラウザにはデータを保存するための仕組みがいくつか用意されています。その中でもlocalStorageとsessionStorageは手軽に利用できる保存先としてよく使われます。どちらもWeb Storage APIに含まれていますが、保存期間や用途が異なるため正しく理解して使い分けることが大切です。
localStorageとは
localStorageはブラウザに半永久的にデータを保存できる仕組みです。ユーザーがブラウザを閉じてもデータは残り続け、明示的に削除しない限り保持されます。ユーザー設定やテーマカラー、ログイン状態の維持などに向いています。
// データを保存
localStorage.setItem('theme', 'dark');
// データを取得
const theme = localStorage.getItem('theme');
// データを削除
localStorage.removeItem('theme');
// 全てのデータをクリア
localStorage.clear();
sessionStorageとは
sessionStorageはブラウザタブを閉じるまでデータを保持します。新しいタブやウィンドウを開いた場合は別のセッションとみなされ、データは共有されません。一時的な入力データや確認画面用の値など、ページ閲覧中だけ保持したい情報に適しています。
// データを保存
sessionStorage.setItem('draft', '入力中の内容');
// データを取得
const draft = sessionStorage.getItem('draft');
// データを削除
sessionStorage.removeItem('draft');
// 全てのデータをクリア
sessionStorage.clear();
違いのまとめ
| 項目 | localStorage | sessionStorage |
|---|---|---|
| データの有効期限 | 明示的に削除するまで永続 | タブやウィンドウを閉じるまで |
| スコープ | 同一オリジンで共有 | タブ単位で分離 |
| 容量の目安 | 約5MB | 約5MB |
| 主な用途 | ユーザー設定・ログイン情報・テーマカラー | 入力フォームの一時保存・確認画面用データ |
使い分けの考え方
長期間保持すべきデータ（ユーザーの選択やアプリの状態）はlocalStorageに、一時的な処理で十分なデータ（確認画面やタブ間共有不要な一時保存）はsessionStorageに保存するのが基本です。ただしどちらも暗号化されていないため、機密情報やパスワードを保存するのは避けましょう。
よくある質問（FAQ）
Q. localStorageとsessionStorageの主な違いは何ですか？
A. localStorageはブラウザを閉じてもデータが永続します。sessionStorageはタブ（セッション）を閉じると削除されます。同じオリジン・同じタブ内でのみデータを保持します。
Q. sessionStorageはどんな用途に向いていますか？
A. 1つのセッション（タブ）内でのみ使う一時データに適しています。例：フォームの入力途中の保存、ページ間での一時的なデータ受け渡し、タブを閉じたら忘れて欲しいカート情報などです。
Q. 両ストレージを安全に使うには？
A. 機密情報は保存しないでください。XSS攻撃でアクセスされる可能性があります。また容量（5MB程度）を超えると例外が発生するため、try-catchでQuotaExceededErrorを処理してください。
まとめ
localStorageとsessionStorageは使い方がよく似ていますが、保存期間とスコープが大きな違いです。用途に合わせて適切に選択することで、快適で安全なWebアプリケーションを実装できます。
