如何实现注册表单提交后通过cookies存储用户信息至下一页

核心逻辑是在表单提交前拦截提交动作，遍历拿到所有表单字段值后按规则写入Cookie，写入时配置全站可访问的路径参数，下一页面加载时解析Cookie字符串即可拿到对应数据。

具体实现步骤 #

• 第一步：拦截表单默认提交行为
  给注册表单绑定submit事件，先调用e.preventDefault()阻止默认的即时跳转，等Cookie写入操作完成后再手动触发表单提交，避免跳转时机太早导致Cookie没写完。
• 第二步：封装通用Cookie写入方法
  写入时必须做两个处理：一是用encodeURIComponent转义字段名和值，避免中文、空格、特殊符号导致Cookie写入异常；二是设置path=/，保证同域名下所有页面都能读取到这部分Cookie，否则只有表单所在路径的页面能访问到写入的内容。
• 第三步：遍历字段写入Cookie
  筛选出表单内所有有效输入项（排除密码框、提交按钮、无name属性的无效字段），逐一把字段名和对应值写入Cookie，可按需设置Cookie过期时间。
• 第四步：下一页面读取Cookie
  页面加载时解析document.cookie字符串，拆分键值对后做解码，就能拿到之前存储的所有用户表单数据。

可直接复用的代码示例 #

表单页代码 #

<!-- 注册表单示例 -->
<form id="registerForm" action="/user/welcome.html">
  <div>
    <label>用户名：</label>
    <input type="text" name="username" required>
  </div>
  <div>
    <label>手机号：</label>
    <input type="tel" name="phone" required>
  </div>
  <div>
    <label>密码：</label>
    <input type="password" name="password" required>
  </div>
  <button type="submit">提交注册</button>
</form>

<script>
// Cookie写入通用方法
function setCookie(name, value, expireDays = 7) {
  const expireDate = new Date();
  expireDate.setTime(expireDate.getTime() + expireDays * 24 * 60 * 60 * 1000);
  document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)};expires=${expireDate.toUTCString()};path=/`;
}

const form = document.getElementById('registerForm');
form.addEventListener('submit', function(e) {
  e.preventDefault();
  // 遍历所有有效表单字段
  const allFields = form.querySelectorAll('input, select, textarea');
  allFields.forEach(field => {
    // 跳过密码、按钮类不需要存Cookie的字段
    if (!field.name || ['password', 'submit', 'button', 'reset'].includes(field.type)) return;
    setCookie(`reg_${field.name}`, field.value.trim());
  });
  // 写入完成后提交表单跳转
  form.submit();
})
</script>

下一页面（示例中是welcome.html）读取代码 #

<script>
// Cookie读取通用方法
function getCookie(targetName) {
  const cookieArr = document.cookie.split('; ');
  for (let item of cookieArr) {
    const [name, value] = item.split('=');
    if (decodeURIComponent(name) === targetName) {
      return decodeURIComponent(value);
    }
  }
  return '';
}

// 读取之前存储的表单数据
const userInfo = {
  username: getCookie('reg_username'),
  phone: getCookie('reg_phone')
}

// 后续直接调用userInfo里的数据做页面渲染或逻辑处理即可
console.log('读取到的注册信息：', userInfo);
</script>

重要注意事项

• 单个Cookie存储上限约为4KB，不要存入过大的内容
• 绝对不要将密码、身份证号、支付信息等高敏感数据明文存入Cookie，这类数据存在本地极易被窃取篡改，涉及敏感信息建议走服务端Session存储方案，Cookie仅存非敏感的临时数据
• 前端通过JS写入的Cookie无法设置HttpOnly属性，只要是同域页面的JS都能读取到这部分内容，不要存放需要防XSS窃取的内容

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