sessionStorage の基本 — sessionStorage.setItem('k', v) / sessionStorage.getItem('k')
sessionStorage は「同じタブ（ウィンドウ）の“セッション中だけ”データを文字列で保存」できる Web Storage API です。タブやウィンドウを閉じると消え、同一オリジン内でも他タブとは共有されません。
基本の使い方
<script>
// 書き込み（保存）
sessionStorage.setItem("greeting", "こんにちは");
// 読み出し（取得）
const val = sessionStorage.getItem("greeting"); // "こんにちは"
// ないキーは null
console.log(sessionStorage.getItem("nope")); // null
// 削除・全消去
sessionStorage.removeItem("greeting");
sessionStorage.clear();
</script>
- 特徴: 値は必ず文字列。タブを閉じると消える一時保存に向く。フォームの途中入力や一時的な UI 状態の保持に便利です。
オブジェクトや配列を保存するテンプレート
// 保存（JSON化して文字列化）
const user = { name: "Aki", step: 2 };
sessionStorage.setItem("user", JSON.stringify(user));
// 取得（JSONを復元）
const raw = sessionStorage.getItem("user");
const data = raw ? JSON.parse(raw) : null;
console.log(data?.step); // 2
- ポイント:
getItemがnullのままJSON.parse(null)はエラーになるため、nullチェックを挟む。sessionStorage は文字列だけを扱うので、構造化データは JSON 化して保存します。
よく使うテンプレート集
一時的なフォーム入力の保持（同タブ内で復元）
const input = document.getElementById("memo");
input.addEventListener("input", () => {
sessionStorage.setItem("memo:text", input.value);
});
window.addEventListener("DOMContentLoaded", () => {
input.value = sessionStorage.getItem("memo:text") || "";
});
- ラベル: 同じタブでページ遷移・リロードしても入力を保持。タブを閉じたら消えるので安全な一時保存に適します。
ステップフォームの進捗を保持
function saveStep(i) {
sessionStorage.setItem("form:step", String(i));
}
function loadStep() {
return Number(sessionStorage.getItem("form:step") || 1);
}
- ラベル: 途中で戻っても同タブ内で再開しやすい。
一時フィルタ・ソート状態の保存
function saveListState({ q, sort }) {
sessionStorage.setItem("list:state", JSON.stringify({ q, sort }));
}
function restoreListState() {
const raw = sessionStorage.getItem("list:state");
return raw ? JSON.parse(raw) : { q: "", sort: "new" };
}
実務でのコツ
- 用途の切り分け: 一時保存なら sessionStorage、永続保存なら localStorage。sessionStorage はタブを閉じると消える、localStorage はブラウザを閉じても残るのが主な違いです。
- キー整理: 接頭辞でまとめる（例:
app:form,app:list）と管理しやすい。 - 安全な復元: JSON は
try/catchを使うと壊れたデータでも落ちにくい。
function safeParse(raw, fallback = null) {
try { return raw ? JSON.parse(raw) : fallback; } catch { return fallback; }
}
- 容量: 目安は数 MB 程度で、localStorage と同程度。大量データや機密情報の保存には不向きです。
ありがちなハマりポイントと対策
- 他タブで共有されない:
- 対策: sessionStorage は「同一タブ限定」。タブ間共有が必要ならサーバー側や BroadcastChannel を検討。
- null をそのままパースしてエラー:
- 対策:
const raw = getItem(...); raw ? JSON.parse(raw) : ...の形で必ず null チェック。
- 対策:
- 数値が文字列になる:
- 対策: 取得後に
Number(...)やJSON.parse（JSONで保存した場合）で型を戻す。
- 対策: 取得後に
- 容量超過（QuotaExceededError）:
- 対策: データを小さく保つ。不要キーの削除。画像や巨大テキストは保存しない。
練習問題（同タブ内だけで動く一時設定）
<label><input type="checkbox" id="compact"> コンパクト表示</label>
<select id="sort">
<option value="new">新着</option>
<option value="popular">人気</option>
</select>
<script>
const KEY = "app:ui";
// 復元
const raw = sessionStorage.getItem(KEY);
const s = raw ? JSON.parse(raw) : { compact: false, sort: "new" };
document.getElementById("compact").checked = s.compact;
document.getElementById("sort").value = s.sort;
// 変更を保存（同タブ内でのみ有効）
function save() {
const compact = document.getElementById("compact").checked;
const sort = document.getElementById("sort").value;
sessionStorage.setItem(KEY, JSON.stringify({ compact, sort }));
}
document.getElementById("compact").addEventListener("change", save);
document.getElementById("sort").addEventListener("change", save);
</script>
- ラベル: タブを閉じると設定は消えるため、短期的な UI 状態の保持にぴったりです。