JavaScriptのsessionStorage入門｜セッション管理の基本と使い方

sessionStorageは、ブラウザのタブごとにデータを一時的に保存するWeb Storage APIの一つです。ページをリロードしてもデータは保持されますが、タブを閉じると消えます。フォームの一時保存やページ間のデータ受け渡しに便利です。

基本的な使い方

sessionStorageはキーと値のペアでデータを保存します。値は文字列のみ保存可能なため、オブジェクトはJSON.stringify()で変換して保存します。

JavaScript

// データの保存
sessionStorage.setItem("username", "田中");
sessionStorage.setItem("theme", "dark");

// データの取得
const username = sessionStorage.getItem("username");
console.log("ユーザー名:", username);

// 存在しないキーはnullを返す
const notFound = sessionStorage.getItem("nonexistent");
console.log("存在しないキー:", notFound);

// データの削除
sessionStorage.removeItem("theme");

// 全データの削除
sessionStorage.clear();

// 保存されている件数
console.log("保存件数:", sessionStorage.length);

実行結果

ユーザー名: 田中
存在しないキー: null
保存件数: 0

オブジェクトの保存

sessionStorageは文字列のみ保存できるため、オブジェクトや配列はJSON変換が必要です。

JavaScript

// オブジェクトの保存
const user = { name: "田中", age: 28, role: "admin" };
sessionStorage.setItem("user", JSON.stringify(user));

// オブジェクトの取得
const savedUser = JSON.parse(sessionStorage.getItem("user"));
console.log(savedUser);
console.log(savedUser.name);

// 配列の保存
const cart = ["商品A", "商品B", "商品C"];
sessionStorage.setItem("cart", JSON.stringify(cart));

const savedCart = JSON.parse(sessionStorage.getItem("cart"));
console.log(savedCart);

// 安全な取得（nullチェック付き）
function getSession(key, fallback = null) {
  const value = sessionStorage.getItem(key);
  if (value === null) return fallback;
  try {
    return JSON.parse(value);
  } catch {
    return value; // JSON以外の文字列
  }
}
console.log(getSession("user", {}));
console.log(getSession("missing", "デフォルト値"));

実行結果

{ name: "田中", age: 28, role: "admin" }
田中
["商品A", "商品B", "商品C"]
{ name: "田中", age: 28, role: "admin" }
デフォルト値

実践的な活用例

sessionStorageはフォームの一時保存、ウィザード形式の入力保持、一時的な状態管理に適しています。

JavaScript

// フォームの自動保存
function saveFormData() {
  const formData = {
    name: "田中太郎",
    email: "tanaka@example.com",
    message: "お問い合わせ内容..."
  };
  sessionStorage.setItem("contactForm", JSON.stringify(formData));
  console.log("フォームデータを保存しました");
}

function restoreFormData() {
  const saved = sessionStorage.getItem("contactForm");
  if (saved) {
    const formData = JSON.parse(saved);
    console.log("復元:", formData);
    return formData;
  }
  console.log("保存データなし");
  return null;
}

saveFormData();
restoreFormData();

// ページビューカウンター（タブ単位）
let views = parseInt(sessionStorage.getItem("pageViews") || "0");
views++;
sessionStorage.setItem("pageViews", views.toString());
console.log("このタブでの閲覧回数:", views);

// ウィザードのステップ管理
function saveWizardStep(step, data) {
  const wizard = JSON.parse(sessionStorage.getItem("wizard") || "{}");
  wizard[`step${step}`] = data;
  sessionStorage.setItem("wizard", JSON.stringify(wizard));
}
saveWizardStep(1, { name: "田中" });
saveWizardStep(2, { email: "tanaka@example.com" });
console.log("ウィザード:", JSON.parse(sessionStorage.getItem("wizard")));

実行結果

フォームデータを保存しました
復元: { name: "田中太郎", email: "tanaka@example.com", message: "お問い合わせ内容..." }
このタブでの閲覧回数: 1
ウィザード: { step1: { name: "田中" }, step2: { email: "tanaka@example.com" } }

sessionStorageとlocalStorageの違い

sessionStorageはタブを閉じるとデータが消えますが、localStorageは明示的に削除するまで永続的に保持されます。一時的なデータにはsessionStorage、ユーザー設定など永続化が必要なデータにはlocalStorageを使い分けましょう。

注意点

sessionStorageの容量はブラウザによって異なりますが、一般的に5MB程度です。大量のデータを保存する場合はIndexedDBを検討してください。また、機密情報（パスワード、トークンなど）の保存は避けるべきです。XSS攻撃でJavaScriptからアクセスされる可能性があります。

まとめ

sessionStorageはタブ単位でデータを一時保存する
タブを閉じるとデータは消える（リロードでは保持）
オブジェクトの保存にはJSON変換が必要
フォームの一時保存やウィザードの状態管理に最適
機密情報の保存は避ける