localStorageとsessionStorageの比較

Web Storage APIは、クライアント側で利用できる2つのキーと値のストレージを提供します。localStorageはセッションをまたいで保持され、sessionStorageはタブを閉じるとクリアされます。どちらも文字列の値を保存し、同一オリジン上のJavaScriptから同期的にアクセスできます。

localStorageのデータは、コード、ユーザー、またはブラウザーのデータ削除によって明示的にクリアされるまで保持されます。ブラウザーの再起動、ページの更新、タブを閉じる操作を行っても残ります。容量はブラウザーによって異なりますが、通常はオリジンごとに5～10MBです。

sessionStorageのスコープは、現在のブラウザータブとセッションに限定されます。同じタブ内であればページを更新してもデータは残りますが、タブを閉じるとクリアされます。同じサイトを開いた2つのタブは、それぞれ独立したsessionStorageを持つため、データを共有しません。

どちらのストレージも同じAPIを共有しています。setItem(key, value)、getItem(key)、removeItem(key)、clear()、そしてlengthプロパティを使用できます。同じコードを両方で使うことができ、localStorageをsessionStorageに、またはその逆に置き換えるだけです。

localStorageは、ユーザー設定（テーマ、言語）、キャッシュしたAPIレスポンス、ログイン状態の保持に使用します。sessionStorageは、ウィザードやフォームのステップ状態、チェックアウト前の一時的なショッピングカート、プライバシー上の理由から訪問をまたいで保持すべきでないデータに使用します。

どちらのストレージも、オリジン（プロトコル + ホスト + ポート）単位で厳密に管理されます。https://example.comから、http://example.comによって設定されたlocalStorageを読み取ることはできません。これはセキュリティ境界であり、サブドメインも、document.domainを操作しない限り別のオリジンとして扱われます（document.domainは非推奨です）。

ほとんどのブラウザーでは、どちらもオリジンごとに約5MBの上限があります。上限を超えるとQuotaExceededErrorがスローされます。大量のデータを保存する必要がある場合は、構造化データをギガバイト単位で扱えるIndexedDBが必要です。Web Storageは小さなキーと値の保存向けであり、バイナリデータや大規模なデータセット向けではありません。

Web Storageの読み取りと書き込みは同期的に行われ、メインスレッドをブロックします。大量の読み取りや書き込みを行うと、処理の引っかかりが発生する可能性があります。大規模なデータを頻繁に扱う場合は、IndexedDBを優先してください。パフォーマンス上の問題を避けるため、Web Storageの値は小さくし、利用頻度も抑えてください。

Web Storageに保存できるのは文字列だけです。オブジェクトはJSON.stringify()でシリアライズし、JSON.parse()でデシリアライズします。解析に失敗する場合に備えて、try { return JSON.parse(stored) } catch { return defaultValue }のように処理してください。ストレージ内の破損した値やJSONではない値を解析すると、解析エラーが発生します。

プライベート／シークレットモードのlocalStorageは、すべてのプライベートウィンドウを閉じるとクリアされ、sessionStorageのように動作します。認証状態をlocalStorageに依存するコードでは、予期せずlocalStorageが消去される場合にも対応してください。

ブラウザーでは、サードパーティーのストレージアクセスがますます制限されています。first-party.com上のiframeにあるthird-party.comのコンテンツは、third-party.comのlocalStorageにアクセスできません。SafariのITPとFirefoxのEnhanced Tracking Protectionはストレージを分離しますが、ファーストパーティーでの利用には影響しません。

sessionStorageはいつクリアされますか？

localStorageは、プログラムまたはユーザーによってクリアされるまで無期限に保持され、sessionStorageはタブを閉じるとクリアされます。どちらもオリジン単位で管理される、同期的な文字列のキーと値のストレージで、容量は約5MBです。設定や永続的な状態にはlocalStorageを使用し、タブを閉じた後まで残す必要のない一時的なセッション単位の状態にはsessionStorageを使用してください。