【JavaScript】フォーム入力内容をローカルストレージに保存する方法｜リロードしても消えない！

<input type="text" id="name" placeholder="名前を入力">

const name = document.getElementById("name");

// 読み込み時に復元
window.addEventListener("DOMContentLoaded", () => {
  name.value = localStorage.getItem("name") || "";
});

// 入力のたびに保存
name.addEventListener("input", () => {
  localStorage.setItem("name", name.value);
});

<form id="myForm">
  <input type="text" id="name" placeholder="名前">
  <textarea id="memo" placeholder="メモ"></textarea>
  <label><input type="checkbox" id="agree"> 同意する</label>
  <button type="submit">送信</button>
</form>

const form = document.getElementById("myForm");
const KEY = "formData";

// すべてのフィールドを1つのオブジェクトにして保存
function save() {
  const data = {};
  form.querySelectorAll("input, textarea, select").forEach((el) => {
    data[el.id] = el.type === "checkbox" ? el.checked : el.value;
  });
  localStorage.setItem(KEY, JSON.stringify(data));
}

// 読み込み時にまとめて復元
window.addEventListener("DOMContentLoaded", () => {
  const saved = JSON.parse(localStorage.getItem(KEY) || "{}");
  Object.entries(saved).forEach(([id, value]) => {
    const el = document.getElementById(id);
    if (!el) return;
    if (el.type === "checkbox") el.checked = value;
    else el.value = value;
  });
});

form.addEventListener("input", save); // どのフィールドでも保存

form.addEventListener("submit", () => {
  localStorage.removeItem("formData"); // 下書きを削除
});