JavaScriptのlocalStorageで入力途中の下書きを自動保存する方法

記事作成フォームや問い合わせフォームでは、入力途中にページを閉じてしまうことがあります。サーバーへ保存するほどではない一時的な下書きなら、localStorage を使うと実装しやすいです。

この記事では、入力中のタイトルと本文をブラウザに保存し、再訪時に復元する下書き保存UIを作ります。

HTML

<form class="draft-form">
  <label>
    タイトル
    <input id="title" name="title" type="text" autocomplete="off">
  </label>

  <label>
    本文
    <textarea id="body" name="body" rows="8"></textarea>
  </label>

  <p id="status" aria-live="polite">未保存</p>
  <button type="button" id="clear">下書きを削除</button>
</form>

JavaScript

const STORAGE_KEY = "nines:draft:v1";

const title = document.querySelector("#title");
const body = document.querySelector("#body");
const status = document.querySelector("#status");
const clearButton = document.querySelector("#clear");

function loadDraft() {
  const saved = localStorage.getItem(STORAGE_KEY);

  if (!saved) {
    return;
  }

  const draft = JSON.parse(saved);
  title.value = draft.title ?? "";
  body.value = draft.body ?? "";
  status.textContent = "保存済みの下書きを復元しました";
}

function saveDraft() {
  const draft = {
    title: title.value,
    body: body.value,
    updatedAt: new Date().toISOString(),
  };

  localStorage.setItem(STORAGE_KEY, JSON.stringify(draft));
  status.textContent = "下書きを保存しました";
}

function debounce(callback, delay = 400) {
  let timerId;

  return (...args) => {
    clearTimeout(timerId);
    timerId = setTimeout(() => callback(...args), delay);
  };
}

const saveDraftLater = debounce(saveDraft, 400);

title.addEventListener("input", saveDraftLater);
body.addEventListener("input", saveDraftLater);

clearButton.addEventListener("click", () => {
  localStorage.removeItem(STORAGE_KEY);
  title.value = "";
  body.value = "";
  status.textContent = "下書きを削除しました";
});

loadDraft();

実装のポイント

注意点

• localStorageは端末内の保存なので、ログインをまたいだ同期には向かない
• 個人情報、パスワード、決済情報は保存しない
• 容量制限があるため、長大な本文や画像保存には向かない
• Safariのプライベートブラウズなど、保存できない環境も想定する

あわせて読みたい

• JavaScriptのdebounceとは？検索フォームで使う実装例
• JavaScriptでフォーム入力をリアルタイムに検証する方法
• JavaScriptのイベント委譲とは？一覧UIで使う実装例
• WordPressで速報記事を更新しやすくする書き方

参考資料

• MDN Window: localStorage property
• MDN Debounce