はじめに
Webアプリケーションを開発する中で、「CookieとlocalStorageって何が違うの？」という疑問が出てきた。どちらもブラウザにデータを保存できる機能だが、今回改めて整理してみて、使い所がはっきりした。
自動でサーバーに送られるかどうか
最大の違いは、保存されたデータが自動でサーバーに送られるかどうか。
- Cookie：毎回リクエストと一緒にサーバーに送信される
- localStorage：サーバーに送られない。JavaScriptで明示的に送信する必要がある
セキュリティ設定ができるかどうか
もう一つ大きな違いは、セキュリティ制御の有無。
- Cookieには
HttpOnlyやSecure,SameSiteなどのセキュリティ属性を設定できる - localStorageにはセキュリティ設定がない
保存容量の違い
- Cookie：最大で約4KB
- localStorage：5MB〜10MB程度と大きい
本質的な使い分けの理解
今回の気づきで一番しっくりきたのはこの整理だった。
- Cookieは「サーバーとの橋渡し」に向いている
- localStorageは「クライアント内の一時保存やUI制御」に向いている
サーバーとやりとりする必要がある情報はCookieに、ユーザー端末内だけで完結する情報はlocalStorageに保存するのが自然な設計だと理解した。
おわりに
フロントエンドについてはこれから力をつけていこうと思っていたため、この知識は使えるとイメージできた。
ちょっとした知識が大きな土台になることを改めて感じた。