2025.3.15
ブラウザに保存できるあれこれ（localStorage / IndexedDB / Cookie / セッション / キャッシュ）
■ localStorage
localStorageは、JavaScriptから使えるシンプルなキーと値のストレージ。
同じドメイン内なら、どのページからでも読み書きできる。
- ブラウザを閉じてもデータは消えない
- 容量はそこそこ（数MB程度まで）
- データは文字列として保存される
- 同期的に処理されるので、大量データや重い処理にはあまり向かない
- JavaScriptから簡単にアクセスできる＝XSSに注意が必要
ちょっとした設定値や、UIの状態などを保存しておくのに向いている。
ただし、トークンなどの重要なデータは入れない方が安全。
■ IndexedDB
IndexedDBは、localStorageよりも高機能なブラウザ内のデータベース。
構造化されたデータや大量の情報を扱える。
- 非同期APIで、パフォーマンスに優れている
- バイナリデータも扱える
- スキーマに近いものも定義できる（
object store） - 容量はlocalStorageよりもはるかに大きい
- セキュリティ的にはlocalStorageと同様に、XSS対策が必要
ただし、APIがやや複雑なので、idbなどのラッパーライブラリを使うと扱いやすくなる。
PWAやオフライン対応アプリでは、かなり頼れる存在。
■ Cookie
Cookieは、主にサーバーとクライアント間でデータをやり取りするための仕組み。
HTTP通信時に自動で送信されるのが特徴。
- 1つあたりのサイズは小さい（通常4KB程度）
- キーと値に加えて、有効期限やSecure属性などを持てる
httpOnly属性を付けるとJavaScriptからはアクセスできず、セキュリティ面で安心- セッションIDや認証トークンを扱うのによく使われる
SPA構成の場合は、API認証のトークンをCookieに入れるか、localStorageなどに入れるかで設計が分かれる。
トークンをJavaScriptから触れさせたくないなら、httpOnlyなCookie一択。
■ セッション（sessionStorageなど）
「セッション」という言葉は文脈によって意味が変わるけど、ここではブラウザ内の一時的な保存領域のことを指す。
- 一般的には「アプリが開いている間だけ使うデータ」
sessionStorageは、localStorageと似ているがブラウザを閉じたら消える- ページの状態保持や、リロードまでの一時保存に向いている
セッションそのものはバックエンド側で管理されることも多いが、フロントエンドでも**「一時的に残しておきたいもの」**があるなら、この仕組みは便利。
■ キャッシュ
キャッシュは、HTMLやJavaScript、画像などを一時保存して高速に読み込めるようにする仕組み。
- 通常のHTTPキャッシュ（ブラウザの設定やレスポンスヘッダで制御）
Service WorkerとCache APIを使えば、独自のキャッシュ戦略が組める- オフラインでも動作するPWAなどでよく使われる
たとえば、APIのレスポンスをキャッシュして、何度も同じデータを取得しないようにするなど、パフォーマンス改善の武器になる。
■ まとめ：どう使い分けるか
| 種類 | 向いている用途 | 注意点 |
|---|---|---|
| localStorage | 簡単な設定や状態保持 | XSSに注意。重要情報は避ける |
| IndexedDB | 構造化データや大容量保存 | APIが複雑。ラッパーの利用を検討 |
| Cookie | 認証情報、セッション管理 | httpOnlyでセキュアに使える |
| sessionStorage | 一時的なUI状態など | タブを閉じると消える |
| キャッシュ | 静的ファイルやAPIの高速化 | Cache戦略の設計が重要 |