1. 📘 localStorage と sessionStorage とは？
どちらも JavaScript からアクセスできるWeb Storage（ウェブストレージ）API の一種で、 ブラウザにデータを保存するための仕組みです。
✅ ざっくり違い
| 特性 | localStorage | sessionStorage |
|---|---|---|
| 保存期間 | 永続的（消さない限り残る） | セッション中のみ（閉じたら消える） |
| スコープ（有効範囲） | 同一オリジンであればどのタブでも共有 | 同一オリジンでもタブ単位で隔離 |
| 容量目安 | 約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の設計やユーザー体験に差が出ます。
✅ 比較早見表
| 項目 | localStorage | sessionStorage |
|---|---|---|
| 保存期間 | ブラウザを閉じても残る（永続的） | タブを閉じたら消える（セッション） |
| 有効範囲（スコープ） | 同一オリジン全体（すべてのタブで共有） | 同一オリジン＆同じタブのみで有効 |
| データの型 | 文字列（オブジェクトはJSON化） | 文字列（同様） |
| 最大容量（目安） | 約5〜10MB（ブラウザ依存） | 約5MB（ブラウザ依存） |
| 使用例 | テーマ設定、ログイン情報、進行状況の保存など | 一時的な表示状態、ステップUIの保持など |
| 自動消去 | ×（明示的に削除が必要） | ◎（タブを閉じると自動削除） |
| タブ間での共有 | ◎ 共有される | × タブごとに隔離される |
🎯 どう使い分けるべき？
| 状況 | おすすめ |
|---|---|
| アプリ設定やユーザー情報を永続的に残したい | localStorage |
| フォームの中身など一時的に保存したい | sessionStorage |
| タブごとに独立した状態を保持したい | sessionStorage |
| どのタブでも同じ情報を使い回したい | localStorage |
💡 まとめ
- localStorage は 「残したいもの」
- sessionStorage は 「一時的に持っておきたいもの」
同じAPIで使いやすいけど、“残す”か“消える”かの違い が、アプリ全体の挙動を左右します。
💬 コメント