「Cookieってなんか通知で出てくるやつでしょ？」 「LocalStorage？ローカル…なんとか…？」
どっちも“データ保存系”ってことは分かるけど、正直あんまり違いがわからない。 私も最初はそうでした。でも、JavaScriptを触るようになると避けて通れないのがこの2つ。
今回は、CookieとLocalStorageの違いを、なるべくかみくだいて、ちょっとだけ実践も交えながら紹介します！
目次
ざっくり言うとこんな違い
| Cookie | LocalStorage | |
|---|---|---|
| 保存容量 | 約4KBまで | 約5MBまで |
| 送信のタイミング | 毎回HTTPリクエスト時に自動で送られる | クライアント側のみ（送信されない） |
| 保存期間 | 任意（期限付き or セッション中） | 明示的に消すまで残る |
| 使い方の代表例 | ログイン情報、トラッキング等 | 一時保存、テーマ設定など |
実際に使うとどう違うの？
🍪 Cookieの例
document.cookie = "username=neko123; max-age=3600";これで「username=neko123」というデータが1時間（3600秒）保存されます。 で、このCookieはサーバーに送られるので、ログイン管理とかユーザー識別とかによく使われます。
📦 LocalStorageの例
localStorage.setItem("theme", "dark");これで「theme=dark」というデータがブラウザ内に保存。 サーバーに送られることはなく、ページをリロードしても残ります。
→ JavaScriptだけで操作できるし、UIの設定とかに便利です。
じゃあ、どっちを使えばいいの？
ざっくり判断基準：
- サーバーとやりとりしたいデータ（ログイン状態など） → Cookie
- ブラウザ内で完結する設定や一時保存（ダークモード設定など） → LocalStorage
実務的にはこんな使い分けが多いです：
- ECサイトのカート情報：LocalStorage
- ログイン状態の保持：Cookie（セキュリティ考慮あり）
- ユーザーのテーマカラー記憶：LocalStorage
💡 補足：最近は”SessionStorage”ってのもあります（タブ閉じたら消えるやつ）
注意点もちゃんとあるよ
- Cookieはセキュリティ的に扱い注意（特にログイン情報を保存する場合は
HttpOnlyやSecure属性をつける） - LocalStorageは容量制限に注意（5MB超えるとエラーになる）
- どっちもJSで触れる＝悪用される可能性もある
まとめ
- Cookieは“サーバーと会話するためのメモ”
- LocalStorageは“ブラウザに貼る付箋”みたいなイメージ
- 目的やタイミングに応じて使い分けるのが◎
最初はなんとなくでOK。実際にコード書いて「あーこういうことか」ってなるパターンが多いので、 まずは自分のサイトや勉強用ページにちょこっと組み込んで試してみてください！
コメント