跳转至OTP验证页后返回时，如何保留注册表单值？

针对你遇到的「用户返回注册页时表单自动清空」问题，以下是几种实用的解决方案，结合你的代码场景给出具体实现思路：

1. 本地存储（LocalStorage/SessionStorage）暂存（推荐） #

这是最直接可靠的方案，因为页面跳转后组件状态会重置，本地存储可以跨会话/页面保存临时数据。

实现步骤： #

• 表单输入时同步存储：在每个表单字段的onChange事件中，将完整的表单数据序列化后存入localStorage（或sessionStorage，后者关闭浏览器自动清除）。

  // 示例：假设你用formState管理表单数据
  const handleInputChange = (e) => {
    const newFormState = {...formState, [e.target.name]: e.target.value};
    setFormState(newFormState);
    // 存入本地存储
    localStorage.setItem('tempRegisterForm', JSON.stringify(newFormState));
  };
  

• 组件挂载时恢复数据：在Registration.js中用useEffect钩子，页面加载时检查本地存储是否有未验证的表单数据，若有则恢复：

  useEffect(() => {
    const savedForm = localStorage.getItem('tempRegisterForm');
    const isOtpVerified = localStorage.getItem('otpVerified') === 'true';
    // 仅当OTP未验证时恢复表单
    if (savedForm && !isOtpVerified) {
      setFormState(JSON.parse(savedForm));
    }
  }, []);
  

• OTP验证成功后清除数据：在otpverification.js的验证成功逻辑中，清除本地存储的临时表单数据，并标记OTP已验证：

  // 验证成功后添加
  localStorage.removeItem('tempRegisterForm');
  localStorage.setItem('otpVerified', 'true');
  

• 注册失败/取消时的处理：如果用户在注册页提交失败（比如邮箱已存在），不需要清除本地存储；若用户主动清空表单，可以手动删除本地存储项。

2. 路由状态传递表单数据（适用于临时跳转） #

如果你只需要在同会话的页面跳转中保留数据，可以通过路由状态传递完整表单信息，避免依赖本地存储。

实现步骤： #

• 跳转OTP页时携带完整表单：修改Registration.js中的navigate逻辑，把整个表单数据传入路由状态：

  navigate('/authentication/card/OtpVerification', { 
    state: { 
      email, 
      formData: { firstname, lastname, email, password } 
    } 
  });
  

• 返回注册页时恢复数据：在Registration.js中用useLocation获取路由状态，若存在则恢复表单：

  import { useLocation } from 'react-router-dom';
  
  const location = useLocation();
  useEffect(() => {
    // 从路由状态中获取表单数据（仅当从OTP页返回时）
    if (location.state?.formData) {
      setFirstname(location.state.formData.firstname);
      setLastname(location.state.formData.lastname);
      setEmail(location.state.formData.email);
      setPassword(location.state.formData.password);
    }
  }, [location.state]);
  

注意：这种方式的局限性是，如果用户刷新OTP页面，路由状态会丢失，数据无法恢复，适合对数据持久化要求不高的场景。

3. 全局状态管理（适合大型应用） #

如果你的应用有多个组件需要共享用户注册/认证状态，可以用Context API或Redux来管理未验证的表单数据。

实现思路： #

• 创建一个AuthContext，包含未验证表单的状态和更新方法；
• 注册页输入表单时，更新全局状态中的表单数据；
• OTP验证成功后，清空全局状态中的临时表单数据；
• 注册页挂载时，直接从全局状态读取数据填充表单。

关键注意事项 #

• 敏感数据安全：密码存在localStorage是明文存储，虽然验证成功后会清除，但仍有风险。可以选择sessionStorage，或对密码进行简单加密后存储（不建议复杂加密，避免增加复杂度）。
• 数据过期处理：可以给本地存储的表单数据添加过期时间，比如存入时记录时间戳，恢复时检查是否超过15分钟，过期则自动清空。

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