本文介绍如何将用户在第一个 html 页面输入的邮箱地址，自动填充到第二个 html 页面的对应输入框中，重点讲解使用 localstorage 实现跨页面数据传递的前端方案。
在 Web 开发中，当需要在多个独立 HTML 页面之间共享用户输入（例如登录流程中的邮箱），且不依赖后端状态管理时，localStorage 是一种轻量、可靠且兼容性良好的前端解决方案。它允许你在浏览器中持久化保存键值对，数据在页面跳转甚至关闭标签页后仍可读取（除非手动清除）。
✅ 正确实现步骤
第一步：在第一个 HTML 页面中保存邮箱值
你需要为表单添加 id（如 id="login-form"），并在提交前捕获邮箱输入值，存入 localStorage。注意：原始代码中表单未设置 id，需补充；同时应避免默认提交导致页面刷新丢失 JS 执行机会——推荐使用 e.preventDefault() 或确保脚本在 DOM 加载后执行。
修改后的第一页面关键部分如下：
<form id="login-form" 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('login-form').addEventListener('submit', function(e) {
const email = document.getElementById('Employee_Mail').value.trim();
if (email) {
localStorage.setItem('user_email', email); // 使用语义化 key 名
}
});
</script>⚠️ 注意：不要在 submit 事件中直接调用 localStorage.setItem() 后任由表单提交——若后端 action 是跳转新页面（如 /otp-validate/），则 JS 保存操作已生效；但若 action="" 且无服务端路由处理，建议显式重定向以确保行为可控：e.preventDefault(); localStorage.setItem('user_email', email); window.location.href = 'second.html'; // 替换为你的第二页路径
第二步：在第二个 HTML 页面中读取并填充邮箱
确保目标 <input> 具有唯一 id（如 id="mail"），并在页面加载完成后从 localStorage 取值赋给其 value 属性：
立即学习“前端免费学习笔记（深入）”；
<div class="field">
<input type="text" id="mail" placeholder="Email Address" name="Employee_Mail" required>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const savedEmail = localStorage.getItem('user_email');
if (savedEmail) {
document.getElementById('mail').value = savedEmail;
}
});
</script>✅ 推荐使用 DOMContentLoaded 而非 window.onload，因为它在 DOM 构建完成即触发，无需等待图片等资源加载，响应更快。
? 其他可行方案对比（简要）
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| URL 查询参数 (?email=xxx) | 简单直观、无需存储、可分享链接 | 邮箱暴露在地址栏、长度受限、需编码/解码 | 快速原型或低敏感数据 |
| sessionStorage | 仅当前会话有效、更安全 | 关闭标签页即丢失 | 单次流程强绑定（如多步表单） |
| 后端传递（如 Django 模板变量） | 安全、可控、支持校验 | 需服务端逻辑配合、增加请求复杂度 | 生产环境推荐（尤其涉及认证） |
✅ 最佳实践建议
- ?️ 安全性提醒：localStorage 数据可被前端任意脚本读写，切勿存放密码、Token 等敏感信息；邮箱虽非高危，也建议结合后端二次校验。
- ? 清理机制：在 OTP 验证成功或用户退出时，调用 localStorage.removeItem('user_email') 清理残留数据。
- ? 跨域限制：localStorage 遵循同源策略（协议+域名+端口），确保两页面部署在同一源下（如均为 http://localhost:8000/）。
通过以上方式，你就能无缝实现邮箱值在前后两个静态 HTML 页面间的自动传递，为后续 OTP 验证流程提供良好用户体验。
