使用react-form-hook时注册表单页面切换后数据丢失的持久化方案咨询

react-hook-form默认将表单状态存在内存中，页面卸载后状态就会丢失，所以跳转返回后数据清空是正常现象。下面提供两种实用的持久化方案：

方案一：手动利用localStorage同步数据 #

无需额外依赖，自己控制数据读写逻辑，灵活性更高：

1. 初始化表单时，从localStorage读取之前保存的表单数据作为defaultValues
2. 监听表单值的变化，实时同步到localStorage
3. 表单提交成功后，清除localStorage中的缓存（避免残留敏感数据）

代码示例：

import { useForm, watch } from 'react-hook-form';
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom'; // 假设使用react-router做页面跳转

function RegisterForm() {
  const navigate = useNavigate();
  // 从localStorage读取缓存数据，无缓存则用空对象
  const savedFormData = JSON.parse(localStorage.getItem('registerForm')) || {};
  
  const { register, handleSubmit } = useForm({
    defaultValues: savedFormData,
  });

  // 监听所有表单字段的变化
  const formValues = watch();

  // 表单值更新时，同步写入localStorage
  useEffect(() => {
    localStorage.setItem('registerForm', JSON.stringify(formValues));
  }, [formValues]);

  const onSubmit = (data) => {
    // 这里编写你的注册提交逻辑
    console.log('提交的数据：', data);
    
    // 提交成功后清除缓存
    localStorage.removeItem('registerForm');
    // 跳转到目标页面
    navigate('/register-success');
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>用户名：</label>
        <input {...register('username')} placeholder="请输入用户名" />
      </div>
      <div>
        <label>邮箱：</label>
        <input {...register('email')} type="email" placeholder="请输入邮箱" />
      </div>
      <div>
        <label>密码：</label>
        <input {...register('password')} type="password" placeholder="请输入密码" />
      </div>
      <button type="submit">完成注册</button>
    </form>
  );
}

export default RegisterForm;

方案二：使用官方扩展插件@react-hook-form/persist #

如果不想手动写同步逻辑，可以用官方提供的插件，代码更简洁：

1. 先安装依赖：npm install @react-hook-form/persist
2. 在useForm的配置中添加plugins选项，指定存储方式和缓存key

代码示例：

import { useForm } from 'react-hook-form';
import { persist } from '@react-hook-form/persist';
import { useNavigate } from 'react-router-dom';

function RegisterForm() {
  const navigate = useNavigate();
  
  const { register, handleSubmit } = useForm({
    defaultValues: {
      username: '',
      email: '',
      password: '',
    },
    // 配置持久化：用localStorage存储，缓存key为registerForm
    plugins: [persist({ storage: localStorage, key: 'registerForm' })],
  });

  const onSubmit = (data) => {
    console.log('提交的数据：', data);
    localStorage.removeItem('registerForm');
    navigate('/register-success');
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>用户名：</label>
        <input {...register('username')} placeholder="请输入用户名" />
      </div>
      <div>
        <label>邮箱：</label>
        <input {...register('email')} type="email" placeholder="请输入邮箱" />
      </div>
      <div>
        <label>密码：</label>
        <input {...register('password')} type="password" placeholder="请输入密码" />
      </div>
      <button type="submit">完成注册</button>
    </form>
  );
}

export default RegisterForm;

注意事项 #

• 敏感数据（比如密码）存储在localStorage有安全风险，建议提交后立即清除，或者改用sessionStorage（浏览器关闭后自动清除）
• 如果用户手动清除浏览器缓存，持久化的数据会丢失，这是浏览器存储的固有局限

内容的提问来源于stack exchange，提问作者Manju