Reactでフォームの下書きをlocalStorageに保存する方法

export type Draft = { name: string; message: string };

// 形を変えたときに古い下書きを読まないよう、キーに版を入れておく
const STORAGE_KEY = 'contact-form-draft:v1';

function isDraft(value: unknown): value is Draft {
  if (typeof value !== 'object' || value === null) return false;
  const v = value as Record<string, unknown>;
  return typeof v.name === 'string' && typeof v.message === 'string';
}

// 読めない・壊れている・形が違うときは null を返す
export function loadDraft(): Draft | null {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (raw === null) return null;
    const value: unknown = JSON.parse(raw);
    return isDraft(value) ? value : null;
  } catch {
    return null;
  }
}

// 保存できたら true。容量を超えたときなどは setItem が例外を投げる
export function saveDraft(draft: Draft): boolean {
  try {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(draft));
    return true;
  } catch {
    return false;
  }
}

export function clearDraft(): void {
  try {
    localStorage.removeItem(STORAGE_KEY);
  } catch {
    // 消せなくても、フォームの動きは変えない
  }
}

import { useEffect, useState } from 'react';
import { clearDraft, loadDraft, saveDraft, type Draft } from './draft';

const EMPTY: Draft = { name: '', message: '' };

export function useFormDraft() {
  // 関数そのものを渡すと、最初の表示のときだけ呼ばれる
  const [initial] = useState(loadDraft);
  const [draft, setDraft] = useState<Draft>(initial ?? EMPTY);
  const [restored, setRestored] = useState(initial !== null);
  const [saveFailed, setSaveFailed] = useState(false);

  // draft が変わるたびに、localStorage に書き出す
  useEffect(() => {
    if (draft.name === '' && draft.message === '') {
      clearDraft(); // 空になったら、空の下書きを残さずに消す
      setSaveFailed(false);
      return;
    }
    setSaveFailed(!saveDraft(draft));
  }, [draft]);

  const reset = () => {
    setDraft(EMPTY);
    setRestored(false);
  };

  return { draft, setDraft, reset, restored, saveFailed };
}

import type { FormEvent } from 'react';
import { useFormDraft } from './useFormDraft';

export function ContactForm() {
  const { draft, setDraft, reset, restored, saveFailed } = useFormDraft();

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // ここで送信する。送信に成功したら、下書きを消す
    reset();
  };

  return (
    <form onSubmit={handleSubmit}>
      {restored && <p role="status">保存されていた下書きを復元しました</p>}
      {saveFailed && <p role="alert">下書きを保存できませんでした</p>}
      <label>
        お名前
        <input
          name="name"
          value={draft.name}
          onChange={(e) => setDraft({ ...draft, name: e.target.value })}
        />
      </label>
      <label>
        お問い合わせ内容
        <textarea
          name="message"
          value={draft.message}
          onChange={(e) => setDraft({ ...draft, message: e.target.value })}
        />
      </label>
      <button type="submit">送信</button>
      <button type="button" onClick={reset}>
        下書きを消す
      </button>
    </form>
  );
}

入力したあと: {"name":"山田","message":"注文した本が届きません","status":null,"alert":null,"stored":"{\"name\":\"山田\",\"message\":\"注文した本が届きません\"}","setItemCalls":2}
再読み込みのあと: {"name":"山田","message":"注文した本が届きません","status":"保存されていた下書きを復元しました","alert":null,"stored":"{\"name\":\"山田\",\"message\":\"注文した本が届きません\"}","setItemCalls":2}
送信したあと: {"name":"","message":"","status":null,"alert":null,"stored":null,"setItemCalls":2}
再読み込みのあと: {"name":"","message":"","status":null,"alert":null,"stored":null,"setItemCalls":0}

送信したあと: {"name":"","message":"","status":null,"alert":null,"stored":"{\"name\":\"\",\"message\":\"\"}","setItemCalls":4}
再読み込みのあと: {"name":"","message":"","status":"保存されていた下書きを復元しました","alert":null,"stored":"{\"name\":\"\",\"message\":\"\"}","setItemCalls":2}

保存されていた値 {broken: {"name":"","message":"","status":null,"alert":null,"stored":null,"setItemCalls":0}
保存されていた値 {"name":1,"message":"x"}: {"name":"","message":"","status":null,"alert":null,"stored":null,"setItemCalls":0}
保存されていた値 null: {"name":"","message":"","status":null,"alert":null,"stored":null,"setItemCalls":0}
入力したあと: {"name":"佐藤","message":"","status":null,"alert":null,"stored":"{\"name\":\"佐藤\",\"message\":\"\"}","setItemCalls":1}

容量を使い切るまで書いた結果: {"error":"QuotaExceededError","keys":18,"chars":5242872}
入力したあと: {"name":"山田","message":"","status":null,"alert":"下書きを保存できませんでした","stored":null,"setItemCalls":1}
ほかのキーを消して入力したあと: {"name":"山田太郎","message":"","status":null,"alert":null,"stored":"{\"name\":\"山田太郎\",\"message\":\"\"}","setItemCalls":2}

useEffect(() => {
    const id = setTimeout(() => {
      setSaveFailed(!saveDraft(draft));
    }, 500);
    return () => clearTimeout(id);
  }, [draft]);

記事の useFormDraft: 入力したあとの setItem の回数 6、保存されていた値 {"name":"Yamada","message":""}
記事の useFormDraft: 再読み込みのあとの入力欄 "Yamada"
500ミリ秒待ってから書き出す書き方: 入力したあとの setItem の回数 0、保存されていた値 null
500ミリ秒待ってから書き出す書き方: 再読み込みのあとの入力欄 ""

onRecoverableError: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

import { Suspense, use } from 'react';
import { browser } from 'react-dom';
import { ContactForm } from './ContactForm';

// localStorage を読むフォームを、ブラウザでだけ描画する
function BrowserOnlyContactForm() {
  use(browser('下書きは localStorage に保存されている'));
  return <ContactForm />;
}