「どちらが良いか」ではなく、「何を、誰が、いつ使う情報か」を確認すると整理できます。第49話「Cookieは何を覚えている？」の小さな記録箱を、今回は保存棚ごとに分けます。
漫画：保存の棚は、同じじゃない？ 全4ページ
イトは保存の箱を全部同じだと思う。ユイと模型でCookieの条件に合う送信、ブラウザ内のテーマとそのタブの下書きを見分け、最後は誰がいつ使うかの札を置いて保存先を考える。
画像を押すと拡大できます。＋／−で大きさを変え、拡大中はドラッグして読めます。
1 / 4全部、同じ保存？
ラボの床に三つの保存箱の模型。イトとユイが、受付番号の札、テーマ、下書きを見ている。
1ページ目のセリフ
- イト「保存するなら、同じかな？」
2 / 4条件に合う送信へ添える
Cookieの模型では、記録札が条件に合うリクエストに添えられ、サーバー側へ送られる。
2ページ目のセリフ
- 保存箱の札「Cookie」
- 送信先の札「サーバー」
- 送信を限定する札「条件に合う」
3 / 4続けて使う棚、そのタブの棚
月のテーマを入れたlocalStorageの箱に「次にも」の札を添え、sessionStorageの下書きと画面を「このタブ」の枠内で比べる。
3ページ目のセリフ
- 保存箱「localStorage」・「sessionStorage」
- 例の札「テーマ」・「下書き」
- 範囲の札「次にも」・「このタブ」
4 / 4誰が、いつ使う？
イトは、誰が使うか、いつまで使いたいかの札を三つの保存箱の前へ置く。ユイも同じ模型を見ている。
4ページ目のセリフ
- 確認札「誰が」・「いつ使う」
- イト「使い方から、考えるんだね。」
模型の受付番号やテーマ、下書きは用途を考える例で、実際のログイン状態を保存したものではありません。Cookieの送信は属性やブラウザの制限などに従い、すべての通信に無条件で送るわけではありません。localStorageやsessionStorageの値もスクリプトが読み取って通信することは可能です。localStorageは永久保存や別端末同期を保証せず、sessionStorageはログインのセッションそのものではありません。削除、復元、プライベート閲覧や保存制限も実際の挙動に関係します。
Cookie・localStorage・sessionStorageの比較
Cookieは、Webサイトがブラウザに保存し、次回以降のリクエストでサーバーへ送られることがある小さな記録です。localStorageは、WebページのJavaScriptなどがブラウザ内に保存して使うことが多い領域です。
Cookieとは で見たように、Cookieはログイン状態や同意の選択などに関係する場合があります。一方、localStorageは表示設定、入力途中の下書き、アプリの状態など、ブラウザの中で参照したい情報に使われることがあります。
| 保存場所 | 主な特徴 |
|---|---|
| Cookie | 条件に合うリクエストでサーバーへ送られることがある |
| localStorage | 主にブラウザ内でJavaScriptから使う |
| sessionStorage | タブやウィンドウのセッション中だけ使うことが多い |
ユイ
ログイン保持も設定保存も、全部Cookieに入っていると思っていました
イト
localStorageって、ブラウザ工房の別の棚なの？
ピコ
そう。CookieとlocalStorageは、置く場所も運ばれ方も違う保存棚だよ
ブラウザ工房の保存棚を分けて見る
ピコルート・ラボのブラウザ工房には、受付に見せる札、手元のロッカー、一時作業机があります。Cookieは受付に見せる札に近く、localStorageは手元のロッカー、sessionStorageはその作業中だけ使う机のように考えると分かりやすいです。
ユイ
受付に毎回見せる札なら、Cookieがサーバーへ送られることがある理由も見えます
ピコ
たとえは入口だよ。実際には設定やブラウザの制限も合わせて見るんだ
このたとえで大事なのは、保存できるから何でも入れてよいわけではない点です。秘密情報や個人情報をそのまま置くと危険な場合があります。実際の設計では、サーバー側のセッションや認証の仕組みと組み合わせます。
CookieとlocalStorageの送信方法・保存期間の違い
Cookieには、条件に合うHTTPリクエストへブラウザが付けて送る仕組みがあります。localStorageには同じ自動添付の機能はありませんが、ページのJavaScriptが値を読み、通信で送ることはできます。「localStorageだから外へは絶対に送られない」という意味ではありません。
三つの違いは、保存期間と使われ方で見ると整理できます。
- Cookie: 有効期限や送信先の範囲を設定でき、サーバーとのやり取りに関係しやすい
- localStorage: タブを閉じたあとも残せるが、利用者の削除やブラウザの方針などで失われることがある
- sessionStorage: タブやウィンドウを閉じるまでの一時的な保存に向く
たとえば、サイトのテーマ設定を次回も覚えたいならlocalStorageが候補になることがあります。ログイン状態を続ける仕組みでは、Cookieとサーバー側のセッションが関係する場合があります。セッションとは と合わせると、ブラウザ側の札とサーバー側の台帳を分けて考えられます。
localStorageは、通信方式・ホスト名・ポート番号の組み合わせであるオリジンごとに分かれます。同じアカウントでログインしても、別の端末へ自動で同期する機能ではありません。
sessionStorageはブラウザの保存機能の名前で、ログイン状態を扱うセッションそのものではありません。通常はオリジンに加えてタブなどでも範囲が分かれます。名前が似ていても、保存機能と利用状態を分けて考えます。
ログイン状態と保存場所の関係
「ログイン状態はlocalStorageに入れればよい」と単純には考えません。ログインは本人確認、セッション管理、期限、再認証、盗まれたときの対策などが関係するためです。
多くのサイトでは、CookieにセッションIDや認証に関係する情報を持たせ、サーバー側の状態と照合することがあります。詳しい流れは ログインの仕組み が近い記事です。
localStorageは便利ですが、JavaScriptから読み書きできるため、ページ内のスクリプトに問題があると影響を受ける場合があります。Cookieにも安全設定があり、HttpOnly、Secure、SameSiteなどの考え方があります。初心者の段階では、秘密をそのまま保存しない、保存場所ごとの性質を知る、という二点を押さえると安全です。
保存するときの注意点
CookieもlocalStorageも、使い方を間違えると困ることがあります。
- パスワードや秘密のトークンをそのまま置かない
- 期限や削除時の影響を考える
- 共有端末ではログイン状態を残さない
- Cookie削除で設定やログイン状態が変わることを理解する
- ブラウザやサービスごとの制限を確認する
Cookieを削除すると何が変わるかは、Cookie削除で何が起きるか で詳しく見られます。localStorageもブラウザの設定や開発者ツールから消えることがあり、アプリの設定が戻る場合があります。
開発や運用で説明するときは、「保存できる場所」ではなく「消えたときに困る情報か」「サーバーが毎回見る必要があるか」「別端末でも引き継ぎたいか」を質問にすると判断しやすくなります。ブラウザ側だけに置いた情報は、そのブラウザを変えると見えなくなる場合があります。アカウント設定として残したい情報は、サーバー側の保存も含めて設計します。
ミニワーク：これはどの棚に置く？
次の情報を、Cookie、localStorage、sessionStorageのどれに近いか考えてみましょう。
- 次回も使いたい表示テーマ
- ログイン状態をサーバーが見分けるための受付番号
- 入力中のフォームをそのタブだけで一時的に保つ情報
- Cookie同意バナーで選んだ設定
答えは設計によって変わりますが、例としては1がlocalStorage、2がCookieとサーバー側セッション、3がsessionStorage、4がCookieまたはlocalStorageの候補です。理由まで言えると理解が深まります。
ミニクイズで保存場所の理解を広げる
Q1. CookieとlocalStorageの大きな違いは何ですか？
A. Cookieは条件に合うリクエストでサーバーへ送られることがあり、localStorageは主にブラウザ内で使われます。
Q2. localStorageなら秘密情報を入れても安全ですか？
A. そうとは限りません。JavaScriptから扱えるため、入れる情報とサイトの安全性を確認する必要があります。
Q3. ログイン状態を理解する次の入口はどれですか？
この記事の情報・用語を確認する
読了目安 10分 ／ 更新日
LAB WHITEBOARD
CookieとlocalStorageの違いを一文で説明してみよう
「Cookie、localStorage、sessionStorageの役割を分け、ログイン状態や表示設定の保存場所を混同せず説明できるようになる。」を、いまの自分の言葉で一文にしてみてください。途中の説明でも大丈夫です。
