目次
✅ この記事でわかること
- Cookie・セッション・ローカルストレージの基本的な違い
- それぞれの用途・使われ方
- セキュリティや有効期限の違い
- 実際にどんな場面で使われているか
💡 どれも「保存」なのに、どう違うの？
Webサイトがユーザーに関する情報を覚えておく方法には、
Cookie（クッキー）
セッション
ローカルストレージ
といった仕組みがあります。
ぱっと見似てますが、保存場所や使いどころがぜんぜん違うんです！
🧩 ざっくり比較表
| 比較項目 | Cookie | セッション | ローカルストレージ |
|---|---|---|---|
| 保存場所 | ブラウザ（小容量） | サーバー（またはブラウザ） | ブラウザ（大容量） |
| 保存のタイミング | 明示的に保存 | ログインなどで自動的に開始 | JavaScriptなどで保存 |
| 有効期限 | 指定可能（数分〜数年） | ブラウザを閉じるまで | 明示的に削除するまで残る |
| 送信タイミング | 毎回サーバーへ自動送信 | ページ内のみ共有 | サーバーには送信されない |
| 主な用途 | ログイン状態の維持、分析等 | ログインセッションなど | フロントエンドアプリの設定保存など |
| 容量制限 | 数KB程度 | 少量（実装依存） | 数MBまで（ブラウザ依存） |
👀 使い分けイメージ
- Cookie → サーバー側にもデータを送りたいとき（ログイン情報、トラッキングなど）
- セッション → 一時的に「ログイン中」などの状態を保持したいとき
- ローカルストレージ → 長期的にブラウザ上だけでデータを保持したいとき（設定情報など）
🔐 セキュリティ面での違いは？
- Cookieは盗まれるリスクがあるため、
HttpOnlyやSecure設定が重要 - セッションは一時的な通信情報の保持なので比較的安全だが、タイムアウトに注意
- ローカルストレージはJavaScriptで自由に読み書き可能なため、XSS対策が必須
🧠 まとめ
- 保存場所や保存期間、用途によって3つの機能は使い分けられている
- Cookie → サーバーとやり取りあり、セッション → 一時的な状態保持、ローカルストレージ → フロントだけで保存
- それぞれの特性を理解しておくと、Webの仕組みがもっとクリアに見える！
コメント