ひとことで言うと
localStorageとは、ブラウザがタブを閉じても消えずにデータを保持し続けるストレージです。JavaScriptから`localStorage.setItem('key', 'value')`と書くだけで読み書きでき、同じドメインのページであれば次回アクセス時にも値が残っています。容量は概ね5MBまでで、Cookieと異なりサーバーには自動送信されません。
共有用URLを渡す前に、送付先となる環境でlocalStorageに何が残っているかを確認することが重要です。特にAI生成HTMLにフォームや設定値を保存するコードが含まれる場合、レビュアーのブラウザに以前のデータが混入したまま動作することがあります。シークレットモードで開くと初期状態を再現できるため、動作確認の手順に加えておくと安心です。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
HTML共有で関係する場面
AIで生成したランディングページやダッシュボードをプレビューURLで社内共有する際、そのHTMLがチェックボックスの状態や入力値をlocalStorageに保存するコードを持っていることがあります。確認者が別のタブですでに同ドメインのページを開いていた場合、以前の状態が引き継がれて「仕様通りに動いていない」と誤解されるケースがあります。
ギガサイト便のような静的HTML共有サービスでは、アップロードしたHTMLがそのままブラウザ上で動作します。localStorageへの書き込みはアクセスした相手のブラウザ内に残るため、社外の確認者に渡したあとも相手の環境にデータが蓄積し続けます。共有が終わったら相手にキャッシュとストレージのクリアをお願いするか、ページロード時にストレージを初期化するコードを入れておくと後腐れがありません。
よくある誤解
「localStorageはサーバーに届かないから安全」と思われがちですが、同じドメインで動くJavaScriptはすべてlocalStorageを読み書きできます。第三者スクリプトや広告タグが混入していれば、それらもストレージの値を参照できる点に注意が必要です。AI生成HTMLに外部ライブラリのCDNリンクが自動挿入されている場合は、そのスクリプトの挙動も確認してください。
もう一つよくある誤解は「ブラウザを閉じれば消える」という思い込みです。sessionStorageはタブを閉じると消えますが、localStorageはOSを再起動しても残ります。共有先の確認者が「前回入力した値が残っている」と気づかないまま操作を続け、テスト結果が汚染されることがあります。
安全に使うための注意点
AI生成HTMLを外部に共有する前に、開発者ツール(F12)の「Application」→「Local Storage」タブを開き、意図しないキーが存在しないか確認します。パスワード・トークン・氏名などの個人情報が保存されているコードはリリース前に削除してください。必要なら`localStorage.clear()`をページロード直後に呼び出す1行を追加して、毎回クリーンな状態から始める設計にできます。
共有URLの有効期限が切れた後もlocalStorageのデータはブラウザに残ります。機密度の高いプレビューを社外に送る場合は、共有終了後に確認者へストレージ削除の手順(設定→プライバシー→サイトデータ削除)をメールで案内する運用を加えると、情報漏洩リスクを下げられます。
よくある質問
localStorageとCookieはどう違いますか?
Cookieはリクエストのたびにサーバーへ自動送信されますが、localStorageはブラウザ内にのみ保存されサーバーへは送られません。ただし同ドメインのJavaScriptからはどちらも読み書きできる点は共通です。
シークレットモードでも共有HTMLのlocalStorageは機能しますか?
機能しますが、シークレットモードはタブを閉じるとそのセッション中のlocalStorageがすべて削除されます。初期状態での動作確認に最適なため、共有前の自己チェックはシークレットモードで行うことをおすすめします。
ギガサイト便でHTMLをアップした場合、アクセス者のlocalStorageはどう扱われますか?
ギガサイト便はHTMLをそのまま配信するため、HTML内のJavaScriptがlocalStorageを操作すればアクセス者のブラウザ上でデータが読み書きされます。サービス側がストレージを管理・削除する機能はないため、コード側で不要な書き込みを省く設計が必要です。