【React】離脱したページを再表示したときに保存していないデータを復元する

Formで入力中に他のページに遷移したりタブを閉じたりしてページを離脱し、再度同じページを表示したときに入力途中だった内容を復元する方法です。
Backlogとかであるやつですね。

import { useEffect } from "react";
import { useForm } from "react-hook-form";

const App = () => {
  const { register, handleSubmit, setValue } = useForm();
  const onSubmit = (data: any) => localStorage.removeItem(pathname);
  const pathname = window.location.pathname;

  useEffect(() => {
    const example = localStorage.getItem(pathname);
    if (example) {
      window.confirm("保存されていないデータがあります。復元しますか？") &&
        setValue("example", example);
    }
  }, []);

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          {...register("example")}
          onChange={(e) => {
            localStorage.setItem(pathname, e.target.value);
          }}
        />
        <input type="submit" />
      </form>
    </div>
  );
};

export default App;

onChangeでテキストボックスの値が変更されたらlocalStorage.setItemでローカルストレージに値を保存しています。

useEffectではlocalStorage.getItemでローカルストレージに値があるかどうか見て、値があったらダイアログを表示して復元するかどうか確認し、「はい」を選択したらreact-hook-formのsetValueでテキストボックスに値をセットしています。

Formでsubmitが行われたら(onSubmit関数)、localStorage.removeItemでローカルストレージの値を削除しています。

本当はonChangeではなくuseEffectのクリーンアップ関数を使ってコンポーネントがアンマウントされたタイミングでローカルストレージに保存したかったのですが、できなかったのでとりあえずこれで。

↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです！

にほんブログ村