localStorage と JSON

localStorage はブラウザにデータを永続的に保存できる機能です。ただし、文字列しか保存できないため、オブジェクトや配列を扱う際には JSON との組み合わせが必須になります。

localStorage の基本

localStorage は key-value 形式でデータを保存します。ブラウザを閉じてもデータは残り、明示的に削除するまで保持されます。

// 保存
localStorage.setItem("username", "田中");

// 取得
const name = localStorage.getItem("username");
console.log(name); // "田中"

// 削除
localStorage.removeItem("username");

// 全削除
localStorage.clear();

オブジェクトの保存

localStorage は文字列しか保存できないため、オブジェクトをそのまま保存すると [object Object] になってしまいます。

const user = { name: "田中", age: 25 };

// 間違った方法
localStorage.setItem("user", user);
console.log(localStorage.getItem("user")); // "[object Object]"

// 正しい方法
localStorage.setItem("user", JSON.stringify(user));
console.log(localStorage.getItem("user")); // '{"name":"田中","age":25}'

オブジェクトの取得

保存した JSON 文字列は JSON.parse() でオブジェクトに戻します。

const saved = localStorage.getItem("user");
const user = JSON.parse(saved);

console.log(user.name); // "田中"

オブジェクトを JSON.stringify() で文字列に変換

localStorage.setItem() で保存

localStorage.getItem() で取得

JSON.parse() でオブジェクトに復元

存在確認とデフォルト値

データが存在しない場合、getItem() は null を返します。JSON.parse(null) は null を返すため、デフォルト値の設定が必要です。

function loadData(key, defaultValue) {
  const saved = localStorage.getItem(key);
  if (saved === null) {
    return defaultValue;
  }
  return JSON.parse(saved);
}

const settings = loadData("settings", { theme: "light", fontSize: 14 });

配列の保存

配列もオブジェクトと同様に JSON 変換して保存します。

const todos = [
  { id: 1, text: "買い物", done: false },
  { id: 2, text: "掃除", done: true }
];

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

// 取得
const savedTodos = JSON.parse(localStorage.getItem("todos"));
console.log(savedTodos[0].text); // "買い物"

便利なラッパー関数

JSON 変換を毎回書くのは面倒なので、ラッパー関数を作っておくと便利です。

const storage = {
  get(key, defaultValue = null) {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : defaultValue;
    } catch {
      return defaultValue;
    }
  },
  
  set(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
  },
  
  remove(key) {
    localStorage.removeItem(key);
  }
};

// 使用例
storage.set("user", { name: "田中", age: 25 });
const user = storage.get("user");

注意点

保存できないデータ

関数、undefined、Symbol、Date（文字列になる）などは正しく保存・復元できません。

容量制限

ブラウザによって異なりますが、通常 5MB 程度の制限があります。

// Date の問題
const data = { created: new Date() };
localStorage.setItem("data", JSON.stringify(data));

const restored = JSON.parse(localStorage.getItem("data"));
console.log(typeof restored.created); // "string"（Date ではない）

// Date として使いたい場合は手動で変換
restored.created = new Date(restored.created);

localStorage と JSON を組み合わせることで、ユーザー設定やアプリケーションの状態を簡単に永続化できます。