ひとことで言うと
sessionStorageは、開いているタブ（セッション）が生きている間だけデータを保持するブラウザストレージです。`sessionStorage.setItem('step', '2')`のように書くと値が保存され、同じタブのページ遷移ではデータが引き継がれますが、タブを閉じるかブラウザを終了した瞬間に全データが消えます。容量は5MB程度でlocalStorageと同じです。
localStorageとの最大の違いは「タブをまたいでデータが共有されない」点です。新しいタブで同じURLを開いても、別のsessionStorageが作られるため、片方のタブで保存した値はもう片方からは見えません。この性質により、マルチタブ操作を前提とした確認フローでは、期待通りにデータが引き継がれないことがあります。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
HTML共有で関係する場面
ステップ形式のフォームやウィザード型UIをAIで生成した場合、途中の入力状態をsessionStorageに保持するコードがよく含まれます。共有URLを受け取った確認者が途中でタブを誤って閉じると、入力内容がすべてリセットされます。これはバグではなくsessionStorageの仕様ですが、確認者に説明がないと「壊れている」と報告されるケースがあります。
プレビュー共有後、確認者から「スクリーンショットを撮るために別タブで開いたら最初から始まった」という報告が来ることがあります。これはsessionStorageがタブ間で独立しているためで、共有時に「必ず同じタブで操作してください」と一言添えるだけで混乱を防げます。ギガサイト便のような共有サービスでURLを渡す際は、この注意書きをメッセージに含めると親切です。
よくある誤解
「sessionStorageはブラウザを閉じれば消えるから安全」という認識は正確ですが、「タブを開いている間は誰でも読める」という点を見落としがちです。同じドメインで動作するスクリプトはsessionStorageも参照できるため、外部CDNのJavaScriptが混入している場合は注意が必要です。AI生成HTMLに含まれる外部スクリプトを確認ツールで洗い出しておきましょう。
「sessionStorageはページをリロードしても消える」と思っている方がいますが、実際はリロードでは消えません。F5で更新しても同じタブ上ならデータは維持されます。消えるのは「タブを閉じたとき」だけです。この勘違いにより、リロード後に「データが残っている」と驚かれることがあります。
安全に使うための注意点
外部共有するHTMLにsessionStorageが使われている場合、開発者ツールの「Application」→「Session Storage」タブで保存されているキーと値を確認します。アクセストークン・一時パスワード・個人名などが含まれていないかを事前にチェックし、不要な保存項目はコードから削除してください。
sessionStorageはタブを閉じると消えるため、localStorageほど長期的なリスクはありませんが、タブが開いている間は誰でもブラウザの開発者ツールから中身を参照できます。機密情報を扱うプレビューを共有する際は、パスワード付きURLやメール認証など、アクセス制御があるサービスを利用することで、不正な第三者がタブを開けない状態にすることが第一の対策になります。
よくある質問
sessionStorageのデータはページを更新（F5）すると消えますか？
消えません。リロードでは同じタブが維持されるためデータは残ります。消えるのはタブを閉じたときか、JavaScriptで明示的にremoveItemやclearを呼んだときだけです。
プレビューURLを2つのタブで開いたとき、データは共有されますか？
sessionStorageはタブごとに独立しているため、共有されません。片方のタブで入力した内容はもう一方のタブからは見えません。一貫した動作確認は同一タブで行ってください。
AI生成のHTMLにsessionStorageが使われているか確認する方法は？
ブラウザの開発者ツール（F12）→「Application」→「Session Storage」で確認できます。またHTMLのソースコードで「sessionStorage」という文字列を検索すると、書き込み箇所を素早く特定できます。