ブラウザ保存の3つの違い｜CookieとStorage入門

この記事でわかること

• localStorage、sessionStorage、Cookieの役割の違い
• ブラウザを閉じたとき、タブを閉じたときに残るデータの違い
• Cookieがサーバーへ送られる点と、Web Storageが主にブラウザ内で使われる点
• ログイン情報や入力途中の内容を、どこへ保存するべきかの考え方
• 初学者が避けたいセキュリティ上の誤解

結論・重要ポイント

1. localStorageは同じオリジンで共有され、明示的に削除しない限りブラウザを閉じても残る保存領域です。
2. sessionStorageは同じオリジンでもタブごとに分かれ、タブを閉じると基本的に消える保存領域です。
3. CookieはHTTPリクエストと一緒にサーバーへ送られるため、ログイン状態やサーバー側の判定に使われます。
4. localStorageやsessionStorageへ機密性の高いトークンを安易に保存すると、JavaScriptから読めるリスクがあります。
5. 迷ったら、画面表示の一時設定はsessionStorage、長めに残したい表示設定はlocalStorage、サーバーと連動する認証や状態管理は適切な属性を付けたCookieを候補にします。

対象読者と前提知識

この記事は、JavaScriptでWeb画面を作り始めて、ブラウザへデータを保存する方法に迷っている初学者向けです。

JavaScriptの変数、オブジェクト、文字列の基本が分かれば読み進められます。ここでは仕組みの理解を優先し、実務での認証設計はサーバー側の仕様やフレームワークの推奨も合わせて確認する前提で説明します。

MAO先生と学ぶブラウザ保存の違い

コード・操作手順・具体例

1. localStorageは同じオリジンで長く残す

表示テーマやサイドバーの開閉状態など、次回訪問時にも使いたい軽い設定に向いています。

localStorage.setItem("theme", "dark");

const theme = localStorage.getItem("theme");

if (theme === "dark") {
  document.documentElement.dataset.theme = "dark";
}

localStorageのキーと値は文字列として保存されます。オブジェクトを保存したい場合は、JSON.stringifyとJSON.parseを使います。

const settings = {
  compactMode: true,
  itemsPerPage: 20,
};

localStorage.setItem("settings", JSON.stringify(settings));

const savedSettings = JSON.parse(localStorage.getItem("settings") ?? "{}");
console.log(savedSettings.compactMode);

2. sessionStorageはタブ単位の一時保存に使う

入力途中の検索条件や、同じタブで戻ったときだけ復元したい値に向いています。

const input = document.querySelector("#inquiry-message");

input.addEventListener("input", () => {
  sessionStorage.setItem("draftMessage", input.value);
});

const savedDraft = sessionStorage.getItem("draftMessage");

if (savedDraft) {
  input.value = savedDraft;
}

※この例は考え方を示すサンプルです。実際のフォームでは、個人情報や機密情報を保存するかどうか、保存期限、削除タイミングを先に決めてください。

3. Cookieはサーバーとのやり取りに関係する

サーバーはレスポンスのSet-CookieヘッダーでCookieを設定できます。JavaScriptだけで完結する保存箱ではなく、HTTP通信と関係する点が大きな違いです。

Set-Cookie: session_id=abc123; Path=/; Secure; HttpOnly; SameSite=Lax

この例では、主に次の意味があります。

• Secure: HTTPS接続で送信する
• HttpOnly: JavaScriptのdocument.cookieから読めないようにする
• SameSite=Lax: 外部サイトからのリクエストでCookieが送られる場面を抑える

4. 使い分けの目安

保存したいもの	候補	理由
ダークモード、表示件数	localStorage	次回訪問時も使いたいが、サーバー送信は不要なため
入力途中の一時メモ	sessionStorage	同じタブ内だけで復元したいことが多いため
ログイン状態の判定	Cookie	サーバーがリクエスト時に状態を確認するため
大きなデータ、複雑な構造	IndexedDBなど	Web Storageは同期APIで、大量データには向きにくいため

よくある誤解や失敗

「ブラウザに保存できるなら安全」と考える

ブラウザ内に保存できることと、安全に保存できることは別です。localStorageやsessionStorageはJavaScriptから扱いやすい反面、画面内で実行されるスクリプトから読めます。

ログイントークン、個人情報、決済情報などは、保存場所だけで判断せず、サーバー側の認証方式、Cookie属性、XSS対策、保存期限を含めて設計します。

「sessionStorageはページ移動で必ず消える」と考える

sessionStorageはタブやウィンドウのページセッションに紐づきます。単なる再読み込みでは残る場合があるため、「再読み込みしたら必ず消える保存場所」と覚えると誤解します。

「Cookieに何でも入れればサーバーで使えて便利」と考える

Cookieは条件に合うリクエストへ送られるため、大きな値や不要な値を入れると通信量や管理が悪化します。サーバーに必要な最小限の識別子にし、値そのものへ機密情報を詰め込まない設計が基本です。

Q&A

localStorageとsessionStorageはサーバーへ自動送信されますか？

自動送信されません。JavaScriptで読み出し、必要なら明示的にリクエストへ含めます。サーバーへ自動的に送られる性質を持つのは、条件に合うCookieです。

CookieはJavaScriptから必ず読めますか？

必ず読めるわけではありません。HttpOnly属性が付いたCookieは、document.cookieから読めません。認証用Cookieでは、この性質が重要になることがあります。

どれを使えば一番安全ですか？

保存対象と脅威によって変わります。推測ですが、初学者が迷う場面では「長く残す画面設定はlocalStorage」「タブ内だけの一時値はsessionStorage」「サーバー認証はCookie属性を含めてサーバー側で設計」と分けると、大きな事故を避けやすいです。

localStorageに保存した値はいつ消えますか？

明示的にremoveItemやclearで削除する、ユーザーがブラウザのサイトデータを削除する、ブラウザ側の保存制限やプライベートブラウズの終了などで消えることがあります。永続的なデータ保管庫として過信しない方が安全です。

要点まとめ

• localStorageは、同じオリジンで長く残したい軽い表示設定に向いています。
• sessionStorageは、同じタブ内だけで使いたい一時データに向いています。
• Cookieは、サーバーへ送られる性質があり、ログイン状態などサーバー側の判定に関係します。
• 機密性の高い値は、保存できる場所ではなく、誰が読めるか、どの通信で送られるか、いつ無効化するかで判断します。
• 迷ったときは、保存期間、送信先、JavaScriptからの可読性、削除方法の4点を先に決めると整理しやすくなります。

公式資料・参考資料

• Web Storage API - MDN
• Window: localStorage property - MDN
• Window: sessionStorage property - MDN
• Document: cookie property - MDN
• Set-Cookie header - MDN
• HTML Standard: Web storage - WHATWG

※MDNとWHATWG HTML Standardを2026年7月9日に確認して作成しています。ブラウザ実装やCookie関連の制限は変わることがあるため、実務では対象ブラウザと利用中のフレームワーク資料も確認してください。

内容に合うCTA

ブラウザ保存は小さな機能に見えて、ログイン、入力復元、問い合わせ導線、個人情報管理に影響します。Webアプリや業務フォームで「どこに何を保存するべきか」を整理したい場合は、MAO工房へご相談ください。

授業に登場する3人については、MAO先生のIT授業 キャラクター紹介で確認できます。