JavaScript：ローカルストレージと状態管理

出力 == 田中

setItem で保存、getItem で取得する。

localStorage.setItem("name", "田中");
console.log(localStorage.getItem("name"));

ブラウザを閉じても残るのが localStorage。同じサイトを再訪したとき、前回の状態から続けられる。

解答 == B

localStorage が保存できるのは何型か。

B

中身が完全に失われるのに、エラーも出ないのが厄介。取り出したときに初めて気づくことになる。必ず JSON.stringify() を通す。

出力 == 未設定

getItem は無ければ null を返す。?? で既定値を指定できる（JS03）。

console.log(localStorage.getItem("missing") ?? "未設定");

?? はnull と undefined のときだけ右側を返す。空文字を有効な値として扱いたい場合、|| より安全（JS03）。

const user = { name: "田中", age: 30 };
localStorage.setItem("user", JSON.____(user));
console.log(localStorage.getItem("user"));

出力 == {"name":"田中","age":30}

オブジェクトをJSON文字列にするメソッド（JS16でも使った）。

stringify

配列でもオブジェクトでも、入れ子になっていてもそのまま文字列にできる。取り出すときは JSON.parse で元に戻す。

解答 == B

localStorage は何型で保存するか。

B

取り出すと "42" という文字列になる。そのまま計算すると "42" + 1 が "421" になるので、Number() での変換が必須（JS02）。

出力 == 2

保存は JSON.stringify、復元は JSON.parse。復元後は普通の配列として扱える。

const todos = ["買い物", "掃除"];

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

const loaded = JSON.parse(localStorage.getItem("todos"));
console.log(loaded.length);

stringify と parse は往復の関係。復元した配列には push も map もそのまま使える（JS06・JS09）。

localStorage.setItem("user", '{"name":"田中"}');

const user = JSON.____(localStorage.getItem("user"));
console.log(user.name);

出力 == 田中

JSON文字列を解析してオブジェクトにするメソッド。

parse

parse を通さないと user.name は undefined になる。文字列のままではプロパティにアクセスできない。

解答 == B

JSON.parse は失敗すると例外を投げる。

B

保存内容はユーザーが手で書き換えられるし、アプリの更新で形式が変わることもある。読み込みは必ず try で囲み、失敗したら初期状態から始める。

出力 == 6

Number() で変換する。保存が無い場合は ?? "0" で受けるか、Number(null) が 0 になる性質を使う。

localStorage.setItem("count", "5");

const current = Number(localStorage.getItem("count") ?? 0);
const next = current + 1;

localStorage.setItem("count", next);
console.log(localStorage.getItem("count"));

取り出す → 変換 → 計算 → 保存し直すが更新の基本形。訪問回数のカウントなどはこの4手で作れる。

出力 == null

removeItem で1件だけ削除できる。全部消すなら clear()。

localStorage.setItem("temp", "一時データ");
localStorage.removeItem("temp");

console.log(localStorage.getItem("temp"));

clear() はそのサイトの保存を全部消すので扱いに注意。通常は removeItem でキーを指定して消す。

出力3行が完全一致

try の中で JSON.parse し、?? [] で null に備える。catch でも [] を返す。

function loadArray(key) {
  try {
    return JSON.parse(localStorage.getItem(key)) ?? [];
  } catch (e) {
    return [];
  }
}

localStorage.setItem("ok", JSON.stringify(["A", "B"]));
localStorage.setItem("broken", "{壊れた");

console.log(`${loadArray("ok").length}件`);
console.log(`${loadArray("missing").length}件`);
console.log(`${loadArray("broken").length}件`);

どんな状態でも必ず配列が返るので、呼び出し側は null チェックをしなくて済む。この「常に安全な形で返す」設計が、アプリ全体を壊れにくくする。

出力2行が完全一致

読み込み→変更→保存し直しの流れ。スプレッド構文 { ...settings, theme: "light" } で一部だけ変えられる。

const save = (settings) => localStorage.setItem("settings", JSON.stringify(settings));
const load = () => JSON.parse(localStorage.getItem("settings")) ?? {};

save({ theme: "dark", fontSize: 16 });

const first = load();
console.log(`テーマ：${first.theme} / 文字サイズ：${first.fontSize}`);

save({ ...first, theme: "light" });

const second = load();
console.log(`テーマ：${second.theme} / 文字サイズ：${second.fontSize}`);

保存と読み込みを関数にまとめると、キー名やJSON変換を何度も書かずに済む。{ ...first, theme: "light" } は他の項目を保ったまま1つだけ上書きする書き方（JS07）。

出力3行が完全一致

関数にして3回呼ぶ。取り出した値は文字列なので Number() で変換する。

function visit() {
  const count = Number(localStorage.getItem("visits") ?? 0) + 1;
  localStorage.setItem("visits", count);
  console.log(`${count}回目の訪問です`);
}

visit();
visit();
visit();

Number() を忘れると "01" "011" と文字列が連結されていく。localStorage から取り出した値を計算に使うときは、必ず変換する。

出力3行が完全一致

todos 配列を上に置き、addTodo の中で push → 保存 → 出力の順に行う。最後は JSON.parse で読み直す。

const KEY = "todos";
const todos = JSON.parse(localStorage.getItem(KEY) ?? "[]");

function save() {
  localStorage.setItem(KEY, JSON.stringify(todos));
}

function addTodo(text) {
  todos.push({ text, done: false });
  save();
  console.log(`追加：${text}（全${todos.length}件）`);
}

addTodo("買い物");
addTodo("掃除");

const loaded = JSON.parse(localStorage.getItem(KEY));
console.log(`保存済み：${loaded.length}件`);

状態を変えたら必ず保存する——この順序を徹底することが要点。保存を忘れる箇所が1つでもあると、画面と保存内容がズレて原因の分かりにくいバグになる。

li 2つ・done 1つ・summary が 全2件 / 完了1件

render の中で list.innerHTML = "" してから作り直す（JS11）。完了数は filter で数える。

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

const list = document.querySelector("#list");
const summary = document.querySelector("#summary");

function render() {
  list.innerHTML = "";

  for (const todo of todos) {
    const li = document.createElement("li");
    li.textContent = todo.text;

    if (todo.done) {
      li.classList.add("done");
    }

    list.appendChild(li);
  }

  const doneCount = todos.filter((t) => t.done).length;
  summary.textContent = `全${todos.length}件 / 完了${doneCount}件`;
}

render();

「状態が正、画面はその写し」という考え方。画面を直接いじるのではなく、状態を変えて render を呼び直す。この形なら画面と状態が食い違うことがなく、ReactやVueも同じ思想で作られている。