✒️ SessionStorageとは

SessionStorageとは？

✅ 結論（まずここだけ読めばOK）

SessionStorageは「タブを開いている間だけデータを保存できる仕組み」です。

• ページを再読み込みしても消えない
• でもタブを閉じると全部消える
• LocalStorageと使い方はほぼ同じ

👉 「一時的なメモ」に最適です。

SessionStorageのイメージ（超かんたん）

SessionStorageは、ブラウザの中にある「一時メモ帳」です。

• メモを書く → 保存される
• ページ更新 → メモは残る
• タブを閉じる → メモは消える
• LocalStorageとの違い（ここが重要）

一番大事な違いはこの2つです👇

👉 「一時」か「長期」かの違いだけ覚えればOKです

使い方（まずはこれだけ覚える）

SessionStorageは「キー」と「値」で保存します。

👉 重要：文字列しか保存できません

// 保存
sessionStorage.setItem("username", "fox");

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

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

// 全削除
sessionStorage.clear();

// インデックス番号からキー名を取得
const keyName = sessionStorage.key(index);

// 保存されている件数
sessionStorage.length;

実際の操作手順

ブラウザの開発者ツールで試してみましょう。

手順①：開発者ツールを開く

Windows：F12キー 「Console」を選択

手順②：データを保存

sessionStorage.setItem("test", "hello");

手順③：データを確認

sessionStorage.getItem("test");

👉 "hello" と表示されればOK

手順④：ページをリロード（F5）

もう一度これを実行👇

sessionStorage.getItem("test");

👉 データは残っています

手順⑤：タブを閉じる

タブを閉じる 同じページを開き直す sessionStorage.getItem("test");

👉 null（消えている）になります

よくある使い方（現場でよく見る例）

① 入力フォームの一時保存

// 入力中に保存 sessionStorage.setItem("formName", input.value);

// ページ再表示時に復元 input.value = sessionStorage.getItem("formName");

👉 誤ってリロードしても入力が消えない

② タブごとの状態管理

タブA → 商品Aを選択 タブB → 商品Bを選択

👉 タブごとに状態を分けたいときに便利

③ 一時的なフラグ管理

sessionStorage.setItem("modalShown", "true");

👉 同じタブ内でだけ表示制御したいとき

初心者がハマるポイント（ここが差別化ポイント）

❌ ① オブジェクトはそのまま保存できない

// NG sessionStorage.setItem("user", { name: "taro" });

👉 必ずJSONに変換

// 保存 sessionStorage.setItem("user", JSON.stringify({ name: "taro" }));

// 取得 const user = JSON.parse(sessionStorage.getItem("user"));

❌ ② タブごとに完全に別物

👉 同じサイトでも共有されません。

これは「バグ」ではなく仕様です。

❌ ③ indexの順番は信用しない

sessionStorage.key(0);

👉 順番は保証されません。

❌ ④ 大きなデータは危険

容量：約5〜10MB 同期処理（重くなる）

👉 画像や大量データはNG。

何に使うべきか？

SessionStorageが向いているのは👇

• 一時的な入力データ
• タブ単位の状態管理
• ページ遷移中だけ必要な情報

まとめ

• SessionStorageは「一時保存専用」
• タブを閉じると消える
• LocalStorageとほぼ同じ使い方
• 文字列しか保存できない
• 「ちょっとだけ残したいデータ」に最適