用jQuery+LocalStorage实现OTP验证div持久显示及未验证注册数据存储

一、刷新页面后OTP验证区域保持显示1小时 #

• 用localStorage存状态和过期时间：用户提交注册信息成功、切换到OTP验证界面时，除了修改DOM类名，还要在localStorage里存两个关键值——一个标记当前处于OTP阶段，另一个是1小时后的过期时间戳。
• 页面加载时自动校验：页面初始化时，读取localStorage里的状态数据，如果OTP阶段标记为真，且当前时间没超过过期时间，直接显示OTP区域、隐藏注册区域；如果已经过期，就清空相关存储，切回注册界面。
• 代码示例：

  // 注册成功后存储OTP状态
  const otpExpire = Date.now() + 3600 * 1000; // 1小时后过期
  localStorage.setItem('otpStage', JSON.stringify({
    active: true,
    expireTime: otpExpire
  }));
  
  // 页面加载时检查状态
  window.onload = () => {
    const registerDiv = document.getElementById('register-div');
    const otpDiv = document.getElementById('otp-div');
    const otpData = JSON.parse(localStorage.getItem('otpStage'));
  
    if (otpData && otpData.active && Date.now() < otpData.expireTime) {
      registerDiv.classList.add('hidden');
      otpDiv.classList.remove('hidden');
    } else {
      localStorage.removeItem('otpStage');
      registerDiv.classList.remove('hidden');
      otpDiv.classList.add('hidden');
    }
  };
  

• 收尾处理：用户完成OTP验证或者主动返回注册页时，记得清空localStorage里的otpStage数据，避免状态残留。

二、存储未完成OTP验证的注册数据 #

方案1：前端本地存储（简单快捷） #

• 用localStorage临时保存表单数据，建议实时监听表单输入事件，把非敏感字段（比如手机号、姓名）存起来，密码这类敏感字段最好不存，让用户后续重新输入更安全。
• 代码示例：

  // 实时保存表单非敏感数据
  const registerForm = document.getElementById('register-form');
  registerForm.addEventListener('input', (e) => {
    const formData = new FormData(registerForm);
    const tempData = {};
    formData.forEach((val, key) => {
      if (key !== 'password') tempData[key] = val;
    });
    localStorage.setItem('tempRegisterData', JSON.stringify(tempData));
  });
  
  // 页面加载时自动回填数据
  window.onload = () => {
    const savedData = JSON.parse(localStorage.getItem('tempRegisterData'));
    if (savedData) {
      Object.keys(savedData).forEach(key => {
        const input = document.querySelector(`[name="${key}"]`);
        if (input) input.value = savedData[key];
      });
    }
  };
  

• 清理时机：用户完成OTP验证后，立刻清空localStorage里的tempRegisterData。

方案2：后端缓存存储（更可靠，支持跨设备） #

• 流程：用户提交注册信息后，后端先验证格式合法性，然后生成一个临时用户ID，把注册数据存入Redis（设置1小时过期时间），再把这个临时ID返回给前端存在localStorage里；页面刷新时，前端把临时ID传给后端，后端从Redis取出数据返回，前端自动回填表单。
• 优势：即使用户换设备，只要能拿到临时ID（比如通过短信发送），就能恢复未完成的注册数据；敏感数据存在后端，比前端存储更安全。
• 清理机制：用户完成OTP验证后，后端把临时数据转存到正式用户表，同时删除Redis里的临时数据；过期时间到了，Redis会自动清理失效的临时数据。

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