本文介绍如何将用户在第一个 html 页面输入的邮箱地址，自动填充到第二个 html 页面的对应输入框中，主要使用浏览器 localstorage 实现跨页面数据传递，无需后端参与，适合初学者快速上手。
要在两个独立的 HTML 页面之间传递用户输入（例如邮箱），最轻量、易实现且无需服务端配合的方式是利用浏览器的 localStorage API。它允许你在当前域名下持久化保存字符串数据，即使页面跳转或刷新也不会丢失（除非手动清除）。
✅ 正确实现步骤
第一步：在首页（登录页）保存邮箱值
你需要为表单添加 id="loginForm"（便于 JS 获取），并在提交前将邮箱存入 localStorage。注意：原始代码中表单无 id，需补充；同时推荐使用 preventDefault() 避免意外刷新，并确保 DOM 加载完成后再绑定事件。
修改第一个 HTML 的
⚠️ 注意：localStorage.setItem('email', ...) 中的键名必须与第二页读取时一致（即 'email'），原答案中第二页误写为 getItem("mail")，会导致取不到值，这是常见错误，务必修正。
第二步：在第二页（OTP 验证页）读取并填充邮箱
确保邮箱输入框有 id="mail"（你已具备），然后在页面加载完成后从 localStorage 读取并赋值：
立即学习“前端免费学习笔记（深入）”；
? 其他可行方案对比（简要）
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| localStorage | 简单、持久、无需后端 | 同源限制；用户可手动清除；不适用于敏感信息 | 推荐新手首选，如邮箱预填 |
| URL 查询参数（?email=xxx） | 无需存储，天然可见可调试 | URL 长度限制；暴露信息；需服务端或 JS 解析 | 适合简单跳转，但需处理编码（encodeURIComponent） |
| sessionStorage | 页面会话级，关闭标签即失效 | 生命周期短，不跨标签页 | 若仅需本次会话内传递 |
| 后端传递（如 Django 模板变量） | 安全、可控、支持复杂逻辑 | 需服务端渲染/重定向逻辑，增加开发成本 | 生产环境推荐（如用 redirect('otp_page', email=email)） |
✅ 最佳实践建议
- 始终校验输入：.trim() 去除空格，避免空字符串写入；
- 添加容错：读取时判断 null 或空值，避免异常；
- 敏感信息（如密码、OTP）切勿存入 localStorage；
- 若项目已用 Django，更健壮的做法是：首页面 POST 到视图 → 视图将邮箱存入 session → 渲染第二页时通过 {{ request.session.email }} 注入模板 —— 这样更安全且符合 Web 最佳实践。
通过以上方式，你就能轻松实现跨页面表单数据的自动带入，为用户带来更流畅的登录体验。
