Web Storage（localStorage/sessionStorage） とは？

Webブラウザの中にデータを保存できる仕組みだよ。localStorageとsessionStorageの2種類があって、どちらもJavaScriptから簡単に「キーと値」のペアで読み書きできるんだ。

一番の違いはデータの寿命だよ。localStorageはブラウザを閉じてもデータが残り続けるけど、sessionStorageはタブやウィンドウを閉じたら消えるんだ。たとえばダークモードの設定はlocalStorage、入力フォームの一時保存はsessionStorageが向いているよ。

大きく3つ違うよ。まず容量はCookieが約4KBなのに対し、Web Storageは5〜10MBもある。次にCookieはHTTPリクエストのたびにサーバーへ自動送信されるけど、Web Storageはブラウザ内だけで完結する。最後に、Web Storageの方がAPIがシンプルで使いやすいんだ。

すごく簡単だよ。localStorage.setItem('theme', 'dark') で保存して、localStorage.getItem('theme') で取り出すだけ。sessionStorageも同じAPIで、localStorageの部分をsessionStorageに変えるだけなんだ。

注意点があるよ。まず保存できるのは文字列だけだから、オブジェクトはJSON.stringifyで変換する必要がある。それに同期的に動作するから、大量のデータを扱うとページの描画が止まることがあるんだ。大きなデータにはIndexedDBの方が向いているよ。

Web Storageは同一オリジンポリシーで保護されていて、別のドメインからはアクセスできないよ。でもXSS攻撃でJavaScriptを注入されると中身が丸見えになるから、パスワードやトークンなどの機密情報は保存しちゃダメだよ。

そのとおり。ちなみにプライベートブラウジング（シークレットモード）だとブラウザによってWeb Storageの挙動が変わることがあるよ。Safariでは以前、シークレットモードでlocalStorageへの書き込みがエラーになる問題があったんだ。Web開発では「保存できない場合」のハンドリングも忘れずに実装するのがプロの仕事だよ。