sessionStorage（セッション保存）
sessionStorage.setItem getItem
タブ・ウィンドウを閉じると消えるストレージです。同じタブ内でのみ共有され、別タブとは独立しています。
デモ：sessionStorage の読み書き
このタブでのページ訪問回数：0回
（タブを閉じるとリセットされます。リロードでは増加します）
（タブを閉じるとリセットされます。リロードでは増加します）
コード例
js
// sessionStorage（APIはlocalStorageと全く同じ）
sessionStorage.setItem('formData', JSON.stringify(formValues));
const data = JSON.parse(sessionStorage.getItem('formData') ?? 'null');
sessionStorage.removeItem('formData');
sessionStorage.clear();
// 活用パターン：フォームの一時保存
// input イベントで自動保存
input.addEventListener('input', () => {
sessionStorage.setItem('draft', input.value);
});
// ページ読み込み時に復元
input.value = sessionStorage.getItem('draft') ?? '';
// ページ遷移中のデータ受け渡し
// ページA
sessionStorage.setItem('selectedProduct', JSON.stringify(product));
location.href = '/checkout';
// ページB（/checkout）
const product = JSON.parse(sessionStorage.getItem('selectedProduct'));比較：localStorage vs sessionStorage
| 観点 | localStorage | sessionStorage |
|---|---|---|
| 有効期間 | 永続（手動削除まで） | タブを閉じるまで |
| タブ間の共有 | ✅ 同一オリジンで共有 | ❌ タブごとに独立 |
| リロードで消える？ | ❌ 消えない | ❌ 消えない（タブが生きている間） |
| 主な用途 | ユーザー設定、認証トークンキャッシュ | フォームの下書き、ページ間データ受け渡し |
⚠️ sessionStorage の落とし穴
js
// 新しいタブで開くと、sessionStorageは引き継がれない
// （Ctrl+クリック、window.open で開いた新タブは空）
// ただし「タブを複製」すると一部ブラウザで引き継がれる場合がある
// プライベートモードでも利用可能
// ただし閉じると確実に消える
// SSR（サーバーサイドレンダリング）では使えない
// typeof window !== 'undefined' でチェックが必要
if (typeof window !== 'undefined') {
sessionStorage.setItem('key', 'value');
}🤖 AIプロンプトテンプレート
以下のようなsessionStorageを使ったセッション中のデータ管理のサンプルコードを生成してください： - sessionStorage.setItem / getItem / removeItemの基本操作 - フォーム入力をsessionStorageに自動保存してページ離脱から復元するパターン - ページ間でsessionStorageを使ってデータを受け渡す実装（商品選択→決済ページなど） - sessionStorageとlocalStorageの使い分け（タブ閉じで消えるvs永続） - SSR環境でのtypeof window チェックによる安全なアクセス方法
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。