入力中のフォームが消えない

何のために？

入力途中で閉じた・リロードした → 全部消えた → 二度と書きたくない、を防ぐ。

どう実装する？

localStorage に1秒debounceで自動保存。フォーム送信時に削除。

コード例

function useDraft<T>(key: string, initial: T) {
  const [val, setVal] = useState<T>(() => {
    try { return JSON.parse(localStorage.getItem('draft:' + key) ?? '') ?? initial; }
    catch { return initial; }
  });
  useEffect(() => {
    const t = setTimeout(() => localStorage.setItem('draft:' + key, JSON.stringify(val)), 1000);
    return () => clearTimeout(t);
  }, [val, key]);
  const clear = () => localStorage.removeItem('draft:' + key);
  return [val, setVal, clear] as const;
}

関連機能

• localstorage-store-pattern
• auto-save-pattern