【ろーかるすとれーじ】
ローカルストレージ とは？
最終更新:
💡 ブラウザの中に「小さな引き出し」を作る
Webブラウザにデータをセッションを越えて保存できるWeb Storage APIの一種。オリジンごとに分けて、サーバ通信なしでクライアント側にデータを保持する。
📌 このページのポイント
ひよこ Cookieと何が違うの？
ペンギン先生 ひよこ 何を保存するの？
ペンギン先生 ひよこ セッションストレージとの違いは？
ペンギン先生 ひよこ 別のサイトのローカルストレージも読めちゃうの？
ペンギン先生 読めないよ。保存場所はオリジン（スキーム＋ホスト＋ポート）ごとに分かれているんだ。http://example.com と https://example.com でも別の保存場所になるから、httpsに移行したら前のデータは見えなくなる点に注意だね
ひよこ 開発者ツールで中身を見れる？
ペンギン先生 見れるよ。Chromeの開発者ツール→Application→Local Storageで、現在のサイトが保存しているデータが確認できる。つまり利用者自身も中身を見たり書き換えたりできるということ。だから保存された値を「信頼できるデータ」として扱わず、読み込むときにも検証しようね
もっと詳しく知りたい人へ
ログイン用のトークンやセッションIDをローカルストレージに保存してもいい？
避けたほうがいいよ。ローカルストレージの中身はページ上のJavaScriptからいつでも読めるので、XSSが1つでもあると全部盗まれる可能性がある。OWASPはセッションIDを保存しないよう勧めていて、CookieならHttpOnly属性でJavaScriptから読めなくできる。
容量を超えたらどうなる？
setItem()がQuotaExceededErrorという例外を投げて、その値は保存されない。書き込み処理はtry...catchで囲み、古いデータを消す、保存をあきらめるなどの対応を決めておこう。大きなデータや構造化データにはIndexedDBも選択肢になる。
📖 おまけ：英語の意味
「Local Storage」 ＝ ローカル記憶域
💬 HTML仕様で定義されたWeb Storageの一部だよ。条件に合うリクエストで送られるCookieとは別に、ブラウザ側だけにデータを置ける場所として用意されたんだ