目次

1. はじめに
2. ブラウザストレージの基本3種とは？
   • クッキー（Cookie）
   • ローカルストレージ（LocalStorage）
   • セッションストレージ（SessionStorage）
3. 各ストレージの特徴比較表
4. 具体的なユースケースでの使い分け
5. セキュリティリスクとその対策
6. まとめ

---

はじめに

Webアプリケーションを開発する際、クライアント側にデータを保存して状態を保持することは非常に重要です。
"ログイン状態を維持したい"、"入力フォームの一時保存をしたい"、"ユーザーの設定を覚えさせたい"──そんな場面で登場するのが、ブラウザのストレージ機能です。

本記事では、以下の3つのストレージについて徹底的に比較し、使い分けの判断基準を明確にします。

• Cookie（クッキー）
• LocalStorage（ローカルストレージ）
• SessionStorage（セッションストレージ）

---

ブラウザストレージの基本3種とは？

クッキー（Cookie）

• 送受信：HTTPリクエストに自動的に付与され、サーバーに送信される
• 容量：最大約4KB程度（ブラウザ依存）
• 有効期限：指定可能。設定しなければセッションクッキー（ブラウザを閉じるまで有効）
• 用途例：ログインセッション、トラッキング、ABテスト、CSRF対策

---

ローカルストレージ（LocalStorage）

• 送受信：クライアントサイドのみ。HTTP通信に含まれない
• 容量：約5〜10MB（ブラウザ依存）
• 有効期限：永続的（ユーザーが削除しない限り残る）
• 用途例：ダッシュボードの状態保持、テーマ設定、アプリ内履歴など

---

セッションストレージ（SessionStorage）

• 送受信：クライアントサイドのみ。タブ単位で管理され、HTTP通信には含まれない
• 容量：約5MB
• 有効期限：ブラウザタブを閉じるまで
• 用途例：フォーム入力の一時保存、SPAのステート管理など

---

各ストレージの特徴比較表

項目	Cookie	LocalStorage	SessionStorage
容量	約4KB	約5〜10MB	約5MB
有効期限	任意に設定可能	永続（明示的削除が必要）	タブを閉じるまで
自動送信	毎回HTTPに付与	なし	なし
スコープ	ドメイン＋パス	ドメイン	タブ単位
使用用途	認証、トラッキング	設定保存など	一時保存、状態管理
JSアクセス	可（HttpOnly除く）	可	可

---

具体的なユースケースでの使い分け

ログインセッション管理

• Cookieを使用。HttpOnlyとSecure属性を利用してセキュアに。

ユーザー設定の保存

• LocalStorageが最適。ダークモードや言語設定など。

フォームの一時保存

• SessionStorageが便利。複数ページにまたがるフォームなどに。

トラッキングや分析

• Cookie。第三者Cookieや広告タグに利用される。

---

セキュリティリスクとその対策

CookieのXSS対策

• HttpOnly属性でJSからのアクセスをブロック
• Secure属性でHTTPS通信に限定
• SameSite属性でCSRF対策

LocalStorageの脆弱性

• JSから直接アクセスできるため、XSSの影響大
• 機密データ（トークン等）は絶対に保存しない

SessionStorageの注意点

• タブをまたげない特性に注意
• 状態共有が必要ならBroadcastChannel API等を併用

---

まとめ

条件	推奨ストレージ
サーバーとセッションを共有したい	Cookie（HttpOnly推奨）
ユーザー設定などを保存したい	LocalStorage
タブごとの状態を一時的に保持したい	SessionStorage

ブラウザストレージを正しく使い分けることは、ユーザー体験の向上とアプリのセキュリティ強化に直結します。設計時には用途・スコープ・リスクをよく考慮して選択しましょう。

[cv:issue_marketplace_engineer]