本文介绍如何将用户在第一个登录页输入的邮箱地址，通过前端方式（如 localstorage）传递到第二个 otp 验证页，并自动填充到对应输入框中，无需后端参与，适合初学者快速实现。
要在两个独立的 HTML 页面之间传递表单数据（例如邮箱），最轻量、易上手的方案是使用浏览器提供的 localStorage —— 它允许你在当前域名下持久化保存字符串数据，且页面跳转后仍可读取。
✅ 实现步骤详解
第一步：在首页（登录页）保存邮箱值
你需要为表单添加 id="loginForm"（便于 JS 获取），并在提交前将邮箱存入 localStorage。注意：原代码中表单未设 ID，需补充；同时建议阻止默认提交行为（避免未保存就跳转），改用 window.location.href 显式跳转：
<!-- 在第一个 HTML 的 <form> 标签中添加 id -->
<form id="loginForm" action="" method="post" class="login">
{% csrf_token %}
<div class="field">
<input id="Employee_Mail" type="text" placeholder="Email Address" name="Employee_Mail" required>
</div>
<div class="field btn">
<div class="btn-layer"></div>
<input type="submit" value="Send OTP">
</div>
</form>
<script>
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止默认提交，确保 JS 执行完成
const email = document.getElementById('Employee_Mail').value.trim();
if (email) {
localStorage.setItem('userEmail', email); // 建议用语义化 key，如 'userEmail'
window.location.href = 'second.html'; // 替换为你实际的第二页路径（如 validate.html）
} else {
alert('请输入有效的邮箱地址');
}
});
</script>⚠️ 注意：localStorage 是同源（协议+域名+端口）存储，确保两页在同一域名下（如都为 http://localhost:8000/），否则无法读取。
第二步：在第二页（OTP 页）自动填充邮箱
为邮箱输入框设置 id="mail"（你已存在），然后在页面加载完成后从 localStorage 中读取并赋值：
<!-- 确保第二页的邮箱 input 有 id="mail"（你已有） -->
<input type="text" id="mail" placeholder="Email Address" name="Employee_Mail" required>
<script>
window.addEventListener('DOMContentLoaded', () => {
const savedEmail = localStorage.getItem('userEmail');
if (savedEmail) {
document.getElementById('mail').value = savedEmail;
}
});
</script>✅ 推荐使用 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 开发规范。
