Web ストレージ（localStorage / sessionStorage）

Web ストレージとは

Web ストレージは、ブラウザにデータを保存するための仕組みです。キーと値のペアで保存し、どちらも文字列として扱われます。種類は 2 つあります。

• localStorage：明示的に消すまで永続して残る（タブやブラウザを閉じても消えない）。
• sessionStorage：そのタブを閉じると消える。タブごとに独立している。

どちらもオリジン単位（スキーム・ホスト・ポートの組）で分離されており、別オリジンのデータは見えません。サーバを介さず、JavaScript から直接読み書きします。

使い方

API は両者で共通です。setItem / getItem / removeItem / clear を使います。

// 保存（値は文字列。オブジェクトは JSON 文字列にして入れる）
localStorage.setItem("theme", "dark");
localStorage.setItem("user", JSON.stringify({ id: "u123", name: "Taro" }));

// 取得
const theme = localStorage.getItem("theme"); // "dark"
const user = JSON.parse(localStorage.getItem("user")); // オブジェクトに戻す

// 削除
localStorage.removeItem("theme");
localStorage.clear(); // そのオリジンの全件を削除

// タブ限定にしたいときは sessionStorage（API は同じ）
sessionStorage.setItem("step", "2");

値は文字列のみなので、オブジェクトや配列は JSON.stringify で文字列化して保存し、取り出すときに JSON.parse で戻します。

Cookie との違い

「ブラウザに保存する」点は同じですが、性質はかなり異なります。一番の違いはサーバへ自動送信されるかです。

観点	Web ストレージ	Cookie
サーバへの送信	送られない（クライアント専用）	同じサイト宛に自動で付く
容量の目安	数 MB 程度と大きめ	1 件 4 KB 程度と小さい
有効期限	local は永続 / session はタブ閉じまで	属性で指定（無指定はセッション Cookie）
主な用途	UI 設定・下書き・キャッシュ等	認証・サーバ側セッションの ID 運搬
JS からの読み取り	常に可能	HttpOnly を付ければ不可

Cookie はリクエストごとに自動で送られるため、**サーバが知る必要のある情報（セッション ID など）**に向きます。逆に Web ストレージは送られないので、クライアントだけで完結する情報に向きます。

主な用途

サーバに送る必要がなく、文字列で表せるデータの保存に向きます。

• UI / 表示設定：ダークモード、言語、サイドバーの開閉状態。
• 入力の下書き：フォームの一時保存、書きかけのコメント。
• 軽いキャッシュ：再取得が高コストなデータの一時保持。
• タブ単位の作業状態（sessionStorage）：複数ステップ入力の途中経過。

注意点

手軽な一方、設計を誤ると不具合や事故になります。

• 機密を入れない：JavaScript から誰でも読めるため、XSS が起きるとまるごと盗まれる。トークンやパスワードは保存しない。
• 同期 API：読み書きはメインスレッドを止める同期処理。大量データの頻繁な読み書きは避ける。
• 文字列だけ・容量制限あり：数値やオブジェクトは変換が必要。上限（数 MB 程度）を超えると例外になる。
• 構造化データには不向き：大量・検索が要るデータは IndexedDB の方が適している。

認証情報の置き場所のトレードオフは Cookie とセッション で、オリジンの考え方は CORS で詳しく扱っています。