CookieとlocalStorageの違いは？送信・保存期間・sessionStorageを比較

ミニワーク：これはどの棚に置く？

次の情報を、Cookie、localStorage、sessionStorageのどれに近いか考えてみましょう。

1. 次回も使いたい表示テーマ
2. ログイン状態をサーバーが見分けるための受付番号
3. 入力中のフォームをそのタブだけで一時的に保つ情報
4. Cookie同意バナーで選んだ設定

答えは設計によって変わりますが、例としては1がlocalStorage、2がCookieとサーバー側セッション、3がsessionStorage、4がCookieまたはlocalStorageの候補です。理由まで言えると理解が深まります。

「どちらが良いか」ではなく、「何を、誰が、いつ使う情報か」を確認すると整理できます。第49話「Cookieは何を覚えている？」の小さな記録箱を、今回は保存棚ごとに分けます。

Cookie・localStorage・sessionStorageの比較

Cookieは、Webサイトがブラウザに保存し、次回以降のリクエストでサーバーへ送られることがある小さな記録です。localStorageは、WebページのJavaScriptなどがブラウザ内に保存して使うことが多い領域です。

Cookieとは で見たように、Cookieはログイン状態や同意の選択などに関係する場合があります。一方、localStorageは表示設定、入力途中の下書き、アプリの状態など、ブラウザの中で参照したい情報に使われることがあります。

ユイ

ログイン保持も設定保存も、全部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もブラウザの設定や開発者ツールから消えることがあり、アプリの設定が戻る場合があります。

開発や運用で説明するときは、「保存できる場所」ではなく「消えたときに困る情報か」「サーバーが毎回見る必要があるか」「別端末でも引き継ぎたいか」を質問にすると判断しやすくなります。ブラウザ側だけに置いた情報は、そのブラウザを変えると見えなくなる場合があります。アカウント設定として残したい情報は、サーバー側の保存も含めて設計します。

ミニクイズで保存場所の理解を広げる

Q1. CookieとlocalStorageの大きな違いは何ですか？

A. Cookieは条件に合うリクエストでサーバーへ送られることがあり、localStorageは主にブラウザ内で使われます。

Q2. localStorageなら秘密情報を入れても安全ですか？

A. そうとは限りません。JavaScriptから扱えるため、入れる情報とサイトの安全性を確認する必要があります。

Q3. ログイン状態を理解する次の入口はどれですか？

A. ログインの仕組み と セッションとは です。