✒️ LocalStorageの深堀

結論から

LocalStorageは「ちょっとした設定や小さなデータ保存」には便利ですが、大量データや本格的なアプリの保存には向いていないようです。 1MBを超えるような用途では、別の仕組み（IndexedDBやOPFS+Sqliteなど）を使う方が安全だと思われます。

LocalStorageについてのおさらい

LocalStorageは、ブラウザにデータを保存できる仕組みです。 特徴はとてもシンプルです。

• データは「キー」と「値」で保存
• 文字列しか保存できない
• ページを閉じてもデータが残る

基本的な使い方（操作手順）のおさらい

①データを保存する

localStorage.setItem("name", "Taro");

② データを取り出す

const name = localStorage.getItem("name");
console.log(name); // "Taro"

③ データを削除する

localStorage.removeItem("name");

オブジェクトや配列を保存する方法

LocalStorageは文字列しか扱えないため、JSONを使います。

保存

const user = { name: "Taro", age: 20 };
localStorage.setItem("user", JSON.stringify(user));

取得

const user = JSON.parse(localStorage.getItem("user"));
console.log(user.name); // "Taro"

よくある使い方の例

例①：ダークモード設定の保存

localStorage.setItem("theme", "dark");

例②：入力フォームの一時保存

localStorage.setItem("formData", JSON.stringify(formData));

👉 ページをリロードしても内容が残るので便利です。

注意点①：容量制限（ここが重要）

LocalStorageには容量制限があります。

約 5MB〜10MB（ブラウザによる） 合計での制限（1回ごとではない）

NG例（分けても意味がない）

localStorage.setItem("data1", bigData1);
localStorage.setItem("data2", bigData2);
localStorage.setItem("data3", bigData3);

👉 合計サイズが上限を超えると保存できません。

注意点②：エラーが発生する

容量を超えるとエラーになります。

try {
  localStorage.setItem("big", bigData);
} catch (e) {
  console.error("保存失敗:", e);
}

👉 必ずエラーハンドリングを入れるのが実務では重要です。

注意点③：処理が重くなる（同期処理）

LocalStorageは「同期処理」です。

つまり：

• 書き込み中は画面が止まる可能性あり
• 大きいデータほど影響が大きい

👉 体感的には 1MB以上は注意 です。

注意点④：Safariでは消えることがある

Safariでは「ITP」という仕組みの影響で：

• 7日間アクセスがないとデータが削除されることがある

👉 ログイン情報や重要データには不向きです。

じゃあ何に使うべき？

LocalStorageが向いている用途：

• 設定情報（テーマ・言語）
• 小さなキャッシュ
• 一時的なデータ保存

向いていない用途

よくある誤解ですが、次の用途には使わない方が安全のようです：

• 大量データ保存（画像・ログ）
• 本格的なアプリのデータベース
• 長期間保持したい重要データ

👉 こういう場合は：

• IndexedDB
• OPFS（Origin Private File System）

を検討した方がよさそうです。

実務での判断基準（重要）

迷った場合、下記の基準が目安にできます：

まとめ

• LocalStorageは簡単で便利
• ただし容量は最大でも約5〜10MB
• 同期処理なので大きなデータは危険
• Safariでは消える可能性あり

👉 「小さく・軽く・一時的に」が正しい使い方のようです