ローカルストレージとは何ですか？

Webブラウザにデータを永続的に保存できるWeb Storage APIの一種。サーバ通信不要でクライアント側にデータを保持する。

ローカルストレージのポイントは？

最大約5〜10MBのデータをブラウザに保存可能。キーと値のペア（Key-Value）で保存。セッションストレージと異なり、ブラウザを閉じてもデータが残る。Cookieに比べて容量が大きく、サーバに自動送信されない

【ろーかるすとれーじ】

💡 ブラウザの中に「小さな引き出し」を作る

📌 このページのポイント

ローカルストレージのイメージ

ひよこ

Cookieと何が違うの？

ペンギン先生

大きな違いは3つ。①容量：Cookieは約4KB、ローカルストレージは約5MB。②サーバ送信：Cookieはリクエストのたびにサーバに送信されるけど、ローカルストレージは送信されない。③有効期限：Cookieには期限を設定できるけど、ローカルストレージは明示的に削除するまで残るよ

ひよこ

何を保存するの？

ペンギン先生

ユーザー設定（ダークモードのON/OFF、言語設定）、下書きデータ、キャッシュしたい情報、ログイン状態の記録などが一般的だよ。ただしパスワードや個人情報など機密データの保存はNG。JavaScriptから簡単にアクセスできるから、XSS攻撃で読み取られるリスクがあるんだ

ひよこ

セッションストレージとの違いは？

ペンギン先生

ローカルストレージは「ブラウザを閉じても残る」。セッションストレージは「タブを閉じると消える」。一時的なデータ（フォームの入力途中データなど）はセッションストレージ、永続的な設定はローカルストレージと使い分けるのが基本だよ

ひよこ

開発者ツールで中身を見れる？

ペンギン先生

見れるよ。Chromeの開発者ツール→Application→Local Storageで、現在のサイトが保存しているデータが全部見える。これはつまり「ユーザーも見れる」ということ。だから機密情報の保存には絶対に使わないこと。暗号化してもキーがJavaScriptに含まれるから意味がないんだ

まとめ：ざっくりこれだけ覚えればOK！

「ローカルストレージ」って出てきたら「ブラウザにデータを永続的に保存する仕組み」と思えればだいたいOK！

📖 おまけ：英語の意味

「Local Storage」＝ローカル記憶域

💬 Web Storage APIの一部。Cookieの容量制限（4KB）を超えるデータをブラウザに保存できるようにしたよ