JavaScript | Web API：ストレージ系 API － SessionStorage の基本

JavaScript JavaScript
スポンサーリンク

SessionStorage は「タブごとの一時メモ帳」

まずイメージからいきます。
SessionStorage は 「ブラウザのタブごとに用意される、一時的なメモ帳」 です。

LocalStorage とよく似ていますが、決定的な違いがあります。

タブを閉じたら消える
同じサイトでも、タブごとに中身が別
ブラウザを再起動しても残らない

つまり「このタブを開いている間だけ覚えておきたい情報」を置く場所、という感覚です。

LocalStorage との違いを先に押さえる

どちらも「キーと値のストレージ」

SessionStorage も LocalStorage も、使い方の基本はほぼ同じです。

どちらもキーと値を保存する
どちらも文字列として保存される
どちらも setItem / getItem / removeItem / clear を持っている

なので、API の使い方自体はほぼコピペで覚えられます。

違うのは「いつ消えるか」と「どこから見えるか」です。

消えるタイミングの違い

LocalStorage
ブラウザを閉じても残る。タブを閉じても残る。同じドメインならどのタブからも見える。

SessionStorage
「そのタブの“セッション”が終わったら消える」。タブを閉じたら消える。タブを複製したときは、その時点の中身がコピーされるが、その後は別々。

ここが重要です。
SessionStorage は「タブごとの一時的な状態」を持つのに向いています。

SessionStorage の基本操作

値を保存する setItem

書き方は LocalStorage と同じです。

sessionStorage.setItem("キー", "値");
JavaScript

例えば、ページ内の一時的なステップ番号を保存してみます。

sessionStorage.setItem("currentStep", "2");
JavaScript

ここでも、値は必ず文字列として保存されます。

値を取り出す getItem

保存した値を取り出すには getItem を使います。

const step = sessionStorage.getItem("currentStep");
console.log(step);        // "2"
console.log(typeof step); // "string"
JavaScript

キーが存在しない場合は null が返ります。

const foo = sessionStorage.getItem("foo");
console.log(foo); // null
JavaScript

値を消す removeItem と全部消す clear

特定のキーだけ消す。

sessionStorage.removeItem("currentStep");
JavaScript

SessionStorage の中身を全部消す。

sessionStorage.clear();
JavaScript

重要ポイント：SessionStorage も「全部文字列」

数字として使いたいなら自分で変換する

LocalStorage と同じく、SessionStorage も「文字列しか保存できない」仕様です。

sessionStorage.setItem("count", 10);
JavaScript

こう書いても、実際には "10" という文字列が保存されます。

取り出してそのまま足し算すると、こうなります。

const count = sessionStorage.getItem("count"); // "10"
const next = count + 1;
console.log(next); // "101"（文字列結合）
JavaScript

数字として扱いたいなら、明示的に変換します。

const count = Number(sessionStorage.getItem("count") ?? 0);
const next = count + 1;
console.log(next); // 11
JavaScript

オブジェクトや配列は JSON で保存する

オブジェクトもそのままでは保存できません。

const user = { name: "taro" };

// これはダメ
sessionStorage.setItem("user", user); // "[object Object]" になる
JavaScript

正しいパターンは LocalStorage と同じです。

保存するとき。

const user = { name: "taro", age: 20 };
sessionStorage.setItem("user", JSON.stringify(user));
JavaScript

取り出すとき。

const userJson = sessionStorage.getItem("user");
if (userJson !== null) {
  const user = JSON.parse(userJson);
  console.log(user.name); // "taro"
}
JavaScript

「文字列しか保存できない」「JSON で包む」は、LocalStorage と完全に同じ感覚で OK です。

具体例：ページ内ウィザードの「途中状態」を覚えておく

シナリオを決める

例として、「3 ステップの入力フォーム」を考えます。

ステップ1: 基本情報
ステップ2: 詳細情報
ステップ3: 確認

ユーザーがページをリロードしても、
「さっきどのステップまで進んでいたか」だけは覚えておきたい。
でも、ブラウザを閉じたらリセットされていい。

こういうときに SessionStorage がちょうどいいです。

現在のステップを保存する

ステップが進むたびに、現在のステップ番号を保存します。

function saveCurrentStep(stepNumber) {
  sessionStorage.setItem("currentStep", String(stepNumber));
}
JavaScript

ページ読み込み時にステップを復元する

ページが読み込まれたときに、前回のステップを読み込みます。

function loadCurrentStep() {
  const stored = sessionStorage.getItem("currentStep");
  if (stored === null) {
    return 1; // 何もなければステップ1から
  }
  const step = Number(stored);
  if (Number.isNaN(step) || step < 1 || step > 3) {
    return 1;
  }
  return step;
}
JavaScript

そして、初期化時に使います。

const currentStep = loadCurrentStep();
showStep(currentStep);
JavaScript

ステップを進めるときに保存もする

function goToNextStep() {
  const current = loadCurrentStep();
  const next = Math.min(current + 1, 3);
  saveCurrentStep(next);
  showStep(next);
}
JavaScript

これで、

タブを開いている間は、リロードしてもステップが維持される
タブを閉じて開き直したら、またステップ1から

という挙動になります。

ここでのポイントは、
「タブを閉じたらリセットされてほしい一時的な状態」
に SessionStorage を使っていることです。

SessionStorage の「タブごと」という性質を意識する

タブを複製したときの挙動

ブラウザでタブを「複製」すると、
その時点の SessionStorage の中身がコピーされます。

ただし、その後は別々です。

タブ A で sessionStorage.setItem("foo", "A")
タブ B で sessionStorage.setItem("foo", "B")

それぞれのタブで getItem("foo") を呼ぶと、
A では "A"、B では "B" が返ります。

つまり、
「タブごとに独立した一時状態を持ちたい」
というときに向いています。

LocalStorage と組み合わせるイメージ

よくある使い分けはこうです。

LocalStorage
ユーザー設定、テーマ、ログイン状態のフラグなど、「ブラウザを閉じても残っていてほしいもの」。

SessionStorage
ページ内の一時的な状態、ウィザードの途中ステップ、タブごとの一時フラグなど、「タブを閉じたら消えていいもの」。

どちらも「ブラウザ側のストレージ」ですが、
寿命とスコープが違う、という感覚を持っておくと設計しやすくなります。

注意点と限界

容量は小さい、秘密情報は入れない

SessionStorage も LocalStorage と同じく、容量はそんなに大きくありません（数 MB 程度）。
巨大なデータを入れる場所ではありません。

また、JavaScript から簡単に読めるので、
XSS 攻撃などがあると中身が盗まれる可能性があります。

パスワードや本物のトークンなど、
「絶対に漏れてはいけないもの」は入れない、というのは LocalStorage と同じです。

同じオリジン（ドメイン＋プロトコル＋ポート）だけ

SessionStorage も LocalStorage と同じく、
同じオリジン（例: https://example.com）からだけアクセスできます。

別ドメインや別ポートからは見えません。

初心者として SessionStorage で意識してほしいこと

最後に、頭に置いておいてほしいポイントをまとめます。

SessionStorage は「タブごとの一時メモ帳」
タブを閉じたら消える、ブラウザ再起動でも残らない
API の使い方は LocalStorage とほぼ同じ（setItem / getItem / removeItem / clear）
保存できるのは文字列だけ。オブジェクトは JSON で包む
「タブを閉じたらリセットされていい一時状態」に使うと気持ちいい

練習としては、こんな小さなものがおすすめです。

ページ内のタブ切り替え状態（どのタブが選ばれているか）を SessionStorage に保存する
ウィザード形式フォームの「現在のステップ」を SessionStorage に保存する
一時的なフィルター条件（ソート順など）を SessionStorage に保存する

「このタブを開いている間だけ覚えていてほしいこと」を探して、
そこに SessionStorage を当てはめてみると、
ストレージ系 API の設計センスがじわじわ育っていきます。

スポンサーリンク
タイトルとURLをコピーしました