Webサイトがログイン状態を覚えていたり、表示設定を保存してくれたりする裏側には、CookieやlocalStorage（ローカルストレージ）という仕組みが使われている。どちらも「ブラウザにデータを保存する仕組み」という点では同じだが、実は役割も仕組みもかなり違う。編集部で整理してみると、ホテルの「受付に預ける荷物」と「自分の部屋のロッカー」にたとえるとわかりやすいと感じた。
まず結論：CookieとlocalStorageは「誰が使うデータか」が違う
- Cookie：サーバーとやり取りするための小さなデータ。リクエストのたびに自動で送信される
- localStorage：ブラウザ内だけで使うためのデータ。サーバーへは自動送信されない
- 保存できる容量や有効期限の仕組みも異なり、目的に応じて使い分ける
Cookieとは？――「受付に預けて、毎回提示する荷物札」のようなもの
ホテルに荷物を預けると、受付で荷物札を渡される。この荷物札は、館内のレストランやスパを利用するたびに「私はこのホテルの宿泊客です」と示すために提示することになる。つまり、施設側とのやり取りのたびに、その都度使われる仕組みだ。
Cookieもこれと似ている。ユーザーがログインすると、サーバーは「このブラウザは認証済みですよ」という小さな情報（セッションIDなど）をCookieとしてブラウザに渡す。そして、そのブラウザが同じサイトに次にアクセスするたびに、Cookieは自動的にサーバーへ送信される。サーバー側はそのCookieを見て「ああ、このユーザーはログイン済みだ」と判断できる。
このように、Cookieは「サーバーとブラウザの間でやり取りするための情報」という性質が強く、通信のたびに自動で送受信される点が最大の特徴。保存できる容量は1つあたり数KB程度と小さく、大量のデータを保存する用途には向いていない。
localStorageとは？――「自分の部屋にある、自分専用のロッカー」のようなもの
一方localStorageは、ホテルの部屋に備え付けられた自分専用のロッカーに近い。ロッカーの中身は、フロントに報告する必要も、スタッフに見せる必要もない。自分が使いたいときに開けて、必要な物を出し入れするだけの、完全にプライベートな収納スペースだ。
localStorageも同じように、ブラウザの中だけで完結するデータ保存の仕組み。サイトの表示テーマ設定や、入力途中のフォーム内容、直近に見た商品の履歴など、「サーバーに送る必要はないが、次に訪れたときも覚えておいてほしい」情報を保存するのに向いている。Cookieと違って通信のたびに自動送信されることはなく、サーバー側の処理負荷を増やさない。保存できる容量もCookieよりずっと大きく、一般的なブラウザでは1つのオリジン（サイト）あたり5MB程度まで保存できる。
ただし、localStorageに保存したデータをサーバー側で使いたい場合は、JavaScriptで明示的に読み出し、通信処理（fetchやAjaxなど）を書いて送信する必要がある。Cookieのように「黙っていても勝手に送られる」仕組みではない点は、両者の大きな違いだと言える。
「Cookie」と「localStorage」の違いをたとえでわかりやすく解説
| 観点 | Cookie | localStorage |
|---|---|---|
| ホテルでのたとえ | 受付に預けて毎回提示する荷物札 | 自分の部屋にある専用ロッカー |
| サーバーへの自動送信 | される（リクエストのたびに自動送信） | されない（明示的に読み出す必要がある） |
| 保存容量の目安 | 1つあたり数KB程度 | オリジンあたり5MB程度まで |
| 有効期限 | 発行時に設定可能（期限切れで自動削除） | 明示的に削除しない限り基本的に残り続ける |
| 主な用途 | ログイン状態の維持、セッション管理など | 表示設定の保存、入力途中データの一時保存など |
なぜCookieだけ・localStorageだけではダメなのか？
ログイン状態の維持のような「サーバー側が把握しておく必要がある情報」をlocalStorageだけで管理しようとすると、毎回JavaScriptで明示的にサーバーへ送信する処理を自前で組み立てる必要があり、実装が煩雑になる。Cookieであれば、ブラウザとサーバーの間で自動的にやり取りしてくれるため、認証の仕組みと相性がよい。
一方で、大量のデータや、サーバーに送る必要のないデータまでCookieに詰め込んでしまうと、通信のたびに毎回そのデータが送信されることになり、通信量が無駄に増えてしまう。表示テーマの設定のような「ブラウザ内で完結してよい情報」は、localStorageに保存したほうが効率的だ。
つまり「サーバーとやり取りする必要があるかどうか」で使い分けるのが基本方針であり、どちらか一方だけで済ませようとすると、無駄な通信やコードの複雑化を招きやすいというのが編集部の見解だ。
実際の使われ方・ステップ解説
| ステップ | Cookieの動き | localStorageの動き |
|---|---|---|
| 1. データの発行 | サーバーがレスポンスヘッダーでCookieを指定する | JavaScriptで localStorage.setItem() を実行する |
| 2. データの保存 | ブラウザがCookieを保存する | ブラウザがlocalStorageにデータを保存する |
| 3. 次回アクセス時 | リクエストヘッダーに自動的にCookieが付与される | 自動送信はされず、必要に応じてJavaScriptで読み出す |
| 4. データの破棄 | 有効期限切れ、または明示的な削除で消える | 明示的に removeItem() するまで残り続ける |
まとめ：3行で理解するCookieとlocalStorage
Cookieは「サーバーとのやり取りに使う、自動送信される荷物札」、localStorageは「ブラウザ内で完結する、自分専用のロッカー」。サーバー側で把握すべき情報かどうかを基準に使い分けることが、無駄のない設計につながると編集部では考えている。
よくある質問
Q1. CookieとlocalStorage、どちらを使うべきか迷ったらどう判断すればいいですか？
サーバー側で参照・判断する必要がある情報（ログイン状態など）はCookie、ブラウザ内だけで完結すればよい情報（表示設定や入力途中のデータなど）はlocalStorageを検討する、という基準で考えるとわかりやすい。両方を組み合わせて使う設計も一般的。
Q2. sessionStorageという言葉も見かけますが、localStorageと何が違いますか？
sessionStorageもブラウザ内だけで完結するデータ保存の仕組みという点はlocalStorageと同じだが、保存されたデータはタブやウィンドウを閉じると消える点が異なる。localStorageは明示的に削除しない限りデータが残り続けるのに対し、sessionStorageはその場限りの一時的な保存に向いている。
Q3. Cookieやローカルストレージに保存したデータは安全なのでしょうか？
どちらもブラウザ上に平文に近い形で保存されるため、パスワードやクレジットカード番号のような重要な情報をそのまま保存することは推奨されない。保存する情報の種類や設計方針については、OWASPが推奨するベストプラクティスなど、信頼できる技術資料を参照しながら検討することが望ましい。
Q4. 基本情報技術者試験では、Cookieやローカルストレージはどのように問われますか？
Webシステムの仕組みに関する問題の中で、HTTPが本来「状態を持たない（ステートレスな）」通信であることを補う仕組みとしてCookieが紹介される出題が見られる。ローカルストレージについては、Webブラウザが持つデータ保存機能の一種として、用途や特徴を問う形で出題されることがある。
コメント