Web Storage（localStorage/sessionStorage） とは？
- localStorageはブラウザを閉じてもデータが残る永続的な保存領域
- sessionStorageはタブやウィンドウを閉じるとデータが消える一時的な保存領域
- Cookieより大容量（一般的に5〜10MB）でサーバーに自動送信されない
- ショッピングカートの一時保存やテーマ設定の記憶などに使われる
ひよこ Web Storageってどういうものなの？
ペンギン先生 Webブラウザの中にデータを保存できる仕組みだよ。localStorageとsessionStorageの2種類があって、どちらもJavaScriptから簡単に「キーと値」のペアで読み書きできるんだ。
ひよこ localStorageとsessionStorageって何が違うの？
ペンギン先生 一番の違いはデータの寿命だよ。localStorageはブラウザを閉じてもデータが残り続けるけど、sessionStorageはタブやウィンドウを閉じたら消えるんだ。たとえばダークモードの設定はlocalStorage、入力フォームの一時保存はsessionStorageが向いているよ。
ひよこ Cookieとは何が違うの？
ペンギン先生 ひよこ 使い方は難しいの？
ペンギン先生 すごく簡単だよ。localStorage.setItem('theme', 'dark') で保存して、localStorage.getItem('theme') で取り出すだけ。sessionStorageも同じAPIで、localStorageの部分をsessionStorageに変えるだけなんだ。
ひよこ じゃあ何でもWeb Storageに入れちゃえばいいんじゃないの？
ペンギン先生 ひよこ セキュリティ的に気をつけることはある？
ペンギン先生 Web Storageは同一オリジンポリシーで保護されていて、別のドメインからはアクセスできないよ。でもXSS攻撃でJavaScriptを注入されると中身が丸見えになるから、パスワードやトークンなどの機密情報は保存しちゃダメだよ。
ひよこ なるほど、使いどころを選ぶ必要があるんだね！
ペンギン先生 そのとおり。ちなみにプライベートブラウジング（シークレットモード）だとブラウザによってWeb Storageの挙動が変わることがあるよ。Safariでは以前、シークレットモードでlocalStorageへの書き込みがエラーになる問題があったんだ。Web開発では「保存できない場合」のハンドリングも忘れずに実装するのがプロの仕事だよ。