如何在 HTML 页面间传递表单默认值（如邮箱）

本文介绍如何将用户在第一个 html 页面输入的 邮箱 地址，自动填充到第二个 html 页面的对应输入框中，主要使用 浏览器 localstorage 实现跨页面数据传递，无需 后端 参与，适合初学者快速上手。

要在两个独立的 HTML 页面之间传递用户输入（例如邮箱），最轻量、易实现且无需服务端配合的方式是利用浏览器的 localStorage API。它允许你在当前域名下持久化保存字符串数据，即使页面跳转或刷新也不会丢失（除非手动清除）。

✅ 正确实现步骤

第一步：在首页（登录页）保存邮箱值

你需要为表单添加 id=”loginForm”（便于 JS 获取），并在提交前将邮箱存入 localStorage。注意：原始代码中表单无 id，需补充；同时推荐使用 preventDefault() 避免意外刷新，并确保 DOM 加载完成后再绑定事件。

修改第一个 HTML 的

   {% csrf_token %}   
        
   
     
        
   

⚠️ 注意：localStorage.setItem(’email’, …) 中的键名必须与第二页读取时一致（即 ’email’），原答案中第二页误写为 getItem(“mail”)，会导致取不到值，这是常见错误，务必修正。

第二步：在第二页（OTP 验证页）读取并填充邮箱

确保邮箱输入框有 id=”mail”（你已具备），然后在页面加载完成后从 localStorage 读取并赋值：

立即学习 “ 前端免费学习笔记（深入）”；

? 其他可行方案对比（简要）

✅ 最佳实践建议

• 始终校验输入：.trim() 去除空格，避免空字符串写入；
• 添加容错：读取时判断 null 或空值，避免异常；
• 敏感信息（如密码、OTP）切勿 存入 localStorage；
• 若项目已用 Django，更健壮的做法是：首页面 POST 到视图 → 视图将邮箱存入 session → 渲染第二页时通过 {{request.session.email }} 注入模板 —— 这样更安全且符合 Web 最佳实践。

通过以上方式，你就能轻松实现跨页面表单数据的自动带入，为用户带来更流畅的登录体验。