Closed5
ローカルストレージ・セッションストレージ・cookieをさっくり説明する用
tamaco489| 特性 / 技術 | ローカルストレージ | セッションストレージ | cookie |
|---|---|---|---|
| 用途 | 永続的な保存（設定など） | タブ・ウィンドウ内の一時保存 | サーバーと通信する情報の保持 |
| 保存期間 | 明示的に削除するまで残る | タブを閉じると削除 | 有効期限まで（またはセッション中） |
| スコープ（共有範囲） | 同一オリジン全体 | 同一オリジン＋タブ単位 | 同一オリジン全体（パス指定可能） |
| 容量制限（目安） | 約 5〜10MB | 約 5〜10MB | 約 4KB |
| サーバー送信 | 送信されない | 送信されない | 毎回自動で送信される |
| アクセス手段 | JavaScriptのみ | JavaScriptのみ | JavaScript / HTTP 両方から |
| セキュリティ | JSからアクセス可（XSSに注意） | JSからアクセス可（XSSに注意） | HttpOnly にすれば JSから隠せる |
| 主な使用例 | ユーザー設定、キャッシュ | フォーム途中保存など | 認証トークン、セッションIDなど |
tamaco489いつ何を使うか
🍪 Cookie：サーバーと通信したい情報向き
document.cookie = "token=abc123; path=/; secure; HttpOnly";
- 認証トークン・セッションIDなどに最適
- 毎回自動でサーバーに送られる（リクエストヘッダに含まれる）
- HttpOnly を使えば JS から読み取れないため、XSS耐性が高い
tamaco489💾 localStorage：長期保存・キャッシュ向き
localStorage.setItem("theme", "dark");
- ログインユーザー名、UI設定、ダークモードなど
- ずっと保持される（明示的に削除しない限り）
- サーバーには送られない
- 容量が多く、JSONをそのまま使うケースも多い
tamaco489🧭 sessionStorage：一時的なタブ内の保持向き
sessionStorage.setItem("formStep1", "done");
- ページ内の状態管理、フォーム途中保存などに便利
- タブを閉じると自動で削除される
- 他のタブには共有されない（同じページを複数開いたときに便利）
tamaco489| シーン | 推奨技術 |
|---|---|
| ログイン状態の保持 | cookie（+ HttpOnly） |
| ユーザー設定の保存 | localStorage |
| ページまたぎのフォーム入力保持 | sessionStorage |
| APIレスポンスのキャッシュ | localStorage |
| タブ間で共有しないデータの一時保存 | sessionStorage |
このスクラップは4ヶ月前にクローズされました