[2025/7/14]

【JavaScript 入門講座】localStorageとsessionStorageの違い。保存の基本と使い分け

【JavaScript 入門講座】localStorageとsessionStorageの違い。保存の基本と使い分け

1. 📘 localStorage と sessionStorage とは？

どちらも JavaScript からアクセスできるWeb Storage（ウェブストレージ）API の一種で、 ブラウザにデータを保存するための仕組みです。

✅ ざっくり違い

特性localStoragesessionStorage
保存期間永続的（消さない限り残る）セッション中のみ（閉じたら消える）
スコープ（有効範囲）同一オリジンであればどのタブでも共有同一オリジンでもタブ単位で隔離
容量目安約5〜10MB（ブラウザ依存）約5MB（同じく依存）
同期性同期的（非同期ではない）同上

🔧 使い方はどちらも共通のAPIでシンプル

// 保存
localStorage.setItem("key", "value");
sessionStorage.setItem("key", "value");

// 取得
localStorage.getItem("key");
sessionStorage.getItem("key");

// 削除
localStorage.removeItem("key");
sessionStorage.clear(); // すべて削除

📚 例：ページ読み込み時にメッセージを表示

if (!sessionStorage.getItem("visited")) {
  alert("はじめての訪問ありがとうございます！");
  sessionStorage.setItem("visited", "yes");
}

→ この場合、タブを閉じて再訪問するともう一度表示されます。

2. 📦 localStorage の特徴と使いどころ

localStorage は、ブラウザにデータを“永続的に”保存するためのストレージ です。 ページを閉じても、ブラウザを終了しても、PCを再起動してもデータは残ります。

✅ 特徴まとめ

項目内容
保存期間明示的に削除するまで残る（半永久的）
有効範囲（スコープ）同一オリジン（ドメイン＋ポート）で共有可能
データ形式すべて文字列として保存される
容量約5〜10MB（ブラウザによって異なる）

📘 基本的な使い方

// 保存
localStorage.setItem("username", "lain");

// 取得
const name = localStorage.getItem("username");

// 削除
localStorage.removeItem("username");

// 全削除
localStorage.clear();

🧠 保存できるのは「文字列」のみ

const data = { score: 100, name: "lain" };
localStorage.setItem("user", JSON.stringify(data));

const user = JSON.parse(localStorage.getItem("user"));

→ オブジェクトや配列は JSON.stringify / JSON.parse が必須です

🎯 よくある用途

  • ログイン状態やユーザー名の保存（軽めの用途に限る）
  • サイトテーマ（ダーク/ライト）の保存
  • ゲームの進行状況や設定の保存
  • アプリ設定のキャッシュや一時保存
  • チュートリアルをスキップしたかどうかの判定

⚠️ 注意点

  • すべて文字列として保存される（型が失われる）
  • 同期的に動作する（大量データを扱うとフリーズの恐れ）
  • セキュリティ目的での使用はNG（機密データは絶対に入れない！）

3. 🕒 sessionStorage の特徴と使いどころ

sessionStorage は、現在のタブやウィンドウの“セッション（開いている間）だけ”有効なストレージです。 タブを閉じると自動的にデータが破棄されるため、一時的な状態保持に最適 です。

✅ 特徴まとめ

項目内容
保存期間ブラウザのタブ（ウィンドウ）を閉じるまで
有効範囲（スコープ）同一オリジン＆同じタブ内でのみ有効
データ形式文字列のみ保存可能
容量約5MB（ブラウザ依存）

📘 基本的な使い方（localStorageと全く同じ）

// 保存
sessionStorage.setItem("step", "2");

// 取得
const step = sessionStorage.getItem("step");

// 削除
sessionStorage.removeItem("step");

// 全削除
sessionStorage.clear();

🧠 どんな時に使う？

  • 一時的なフォームデータの保存（ページを移動しても残す）
  • ステップ形式のUI（ウィザードなど）で現在の位置を保持
  • タブごとに異なる状態を保持したいとき
  • 開いている間だけ有効なフラグの管理（例：初回読み込みの表示）

🎯 よくある用途

  • 「ようこそ画面」の初回表示フラグ
  • ページをまたいでも保持したい入力内容
  • タブ間でデータを“分離”したいとき
  • モーダルの開閉状態など一時的なUI状態の保存

⚠️ 注意点

  • タブを閉じるとすべて消える（明示的に保存しないと消える）
  • 他のタブとは共有できない（localStorageとの大きな違い）
  • 同じAPIだが、“用途の違い”が一番重要なポイント

4. 🧩 localStorage と sessionStorage の比較まとめ（早見表）

どちらもブラウザにデータを保存できるWeb Storage APIですが、 その使い分けがしっかりできているかどうかで、UIの設計やユーザー体験に差が出ます。

✅ 比較早見表

項目localStoragesessionStorage
保存期間ブラウザを閉じても残る（永続的）タブを閉じたら消える（セッション）
有効範囲（スコープ）同一オリジン全体（すべてのタブで共有）同一オリジン＆同じタブのみで有効
データの型文字列（オブジェクトはJSON化）文字列（同様）
最大容量（目安）約5〜10MB（ブラウザ依存）約5MB（ブラウザ依存）
使用例テーマ設定、ログイン情報、進行状況の保存など一時的な表示状態、ステップUIの保持など
自動消去×（明示的に削除が必要）◎（タブを閉じると自動削除）
タブ間での共有◎ 共有される× タブごとに隔離される

🎯 どう使い分けるべき？

状況おすすめ
アプリ設定やユーザー情報を永続的に残したいlocalStorage
フォームの中身など一時的に保存したいsessionStorage
タブごとに独立した状態を保持したいsessionStorage
どのタブでも同じ情報を使い回したいlocalStorage

💡 まとめ

  • localStorage は 「残したいもの」
  • sessionStorage は 「一時的に持っておきたいもの」

同じAPIで使いやすいけど、“残す”か“消える”かの違い が、アプリ全体の挙動を左右します。

COMM_LOG: javascript-sessionStorage

NO DATA FOUND IN THIS SECTOR.