本文介绍如何将用户在第一个登录页输入的邮箱地址，通过前端方式（如 localstorage）传递到第二个 otp 验证页，并自动填充到对应输入框中，无需后端参与，适合初学者快速实现。
要在两个独立的 HTML 页面之间传递表单数据（例如邮箱），最轻量、易上手的方案是使用浏览器提供的 localStorage —— 它允许你在当前域名下持久化保存字符串数据，且页面跳转后仍可读取。
✅ 实现步骤详解
第一步：在首页（登录页）保存邮箱值
你需要为表单添加 id="loginForm"（便于 JS 获取），并在提交前将邮箱存入 localStorage。注意：原代码中表单未设 ID，需补充；同时建议阻止默认提交行为（避免未保存就跳转），改用 window.location.href 显式跳转：
⚠️ 注意：localStorage 是同源（协议+域名+端口）存储，确保两页在同一域名下（如都为 http://localhost:8000/），否则无法读取。
第二步：在第二页（OTP 页）自动填充邮箱
为邮箱输入框设置 id="mail"（你已存在），然后在页面加载完成后从 localStorage 中读取并赋值：
✅ 推荐使用 DOMContentLoaded 而非 window.onload，因前者在 DOM 构建完成即触发，不等待图片等资源，响应更快。
立即学习“前端免费学习笔记（深入）”；
? 其他可行方案对比（简要）
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| localStorage | 简单、持久、无需后端 | 同源限制；用户清除缓存会丢失 | 快速原型、内部系统 |
| URL 查询参数（?email=xxx） | 无存储依赖，跨域也可传（需接收页解析） | 邮箱暴露在地址栏；长度受限；需手动编码/解码 | 轻量跳转、调试友好 |
| sessionStorage | 页面会话级，关闭标签页即失效，更安全 | 跳转后若刷新或新开标签会丢失 | 临时性数据，强调会话隔离 |
| 后端传递（Django request.session 或 GET 参数） | 安全可靠、可控性强 | 需服务端逻辑，对初学者稍复杂 | 生产环境推荐 |
✅ 最佳实践建议
- 始终校验输入：前端保存前检查邮箱格式（可用正则 /^\S+@\S+\.\S+$/）；
- 清理冗余数据：OTP 验证成功后，建议调用 localStorage.removeItem('userEmail') 避免残留；
- 兼容性兜底：可增加 try...catch 包裹 localStorage 操作，防止隐私模式下报错；
- 无障碍友好：自动填充后，确保焦点可到达该输入框（如 document.getElementById('mail').focus()）。
通过以上方式，你就能在不依赖后端的前提下，流畅实现跨页表单数据传递——简洁、可靠，且完全符合现代 Web 开发规范。
