本文介绍如何将用户在第一个 html 页面输入的邮箱值，自动填充到第二个 html 页面的对应输入框中，重点讲解使用 `localstorage` 实现跨页数据传递的前端方案。
在构建多步骤表单（如登录流程：输入邮箱 → 发送 OTP → 验证 OTP）时，常需将前一步的用户输入（如邮箱）带入后续页面，避免重复填写。由于纯静态 HTML 页面之间无服务端上下文，推荐使用浏览器提供的客户端存储机制。其中，localStorage 是最简洁、兼容性好且无需后端配合的方案。
✅ 推荐方案：使用 localStorage 传递邮箱值
第一步：在首页面（登录页）保存邮箱
修改第一个 HTML 文件，在表单提交前将邮箱存入 localStorage。注意需为 <form> 添加 id="loginForm"（或直接通过类名/其他方式获取），并确保脚本在 DOM 加载完成后执行：
<!-- 在第一个 HTML 的 </body> 标签前添加 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const emailInput = document.getElementById('Employee_Mail');
const form = document.querySelector('form.login'); // 更健壮的选择器，避免依赖 ID
form.addEventListener('submit', function(e) {
const email = emailInput.value.trim();
if (email) {
localStorage.setItem('userEmail', email); // 建议使用语义化 key 名
}
});
});
</script>⚠️ 注意：不要在 submit 事件中调用 e.preventDefault()，否则表单将无法正常提交跳转；此处仅做数据暂存，提交行为由原 <form method="post"> 自然触发。
第二步：在第二页面（OTP 验证页）读取并填充邮箱
在第二个 HTML 文件中，于页面加载完成时从 localStorage 读取值，并赋给目标输入框：
<!-- 在第二个 HTML 的 </body> 标签前添加 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const mailInput = document.getElementById('mail');
const savedEmail = localStorage.getItem('userEmail');
if (savedEmail) {
mailInput.value = savedEmail;
// 可选：设为只读，防止用户误改（若业务允许修改，请忽略此行）
// mailInput.readOnly = true;
}
});
</script>? 提示：id="mail" 需与 HTML 中 <input id="mail"> 严格一致；若未设置 id，建议补充，否则需改用 name 或其他选择器（如 document.querySelector('input[name="Employee_Mail"]')）。
立即学习“前端免费学习笔记（深入）”；
? 替代方案简析（供进阶参考）
- URL 查询参数（Query String）：提交时重定向至 otp.html?email=xxx@xxx.com，第二页用 new URLSearchParams(window.location.search).get('email') 解析。优点是完全可见、可分享；缺点是邮箱暴露在地址栏，且长度受限。
- Session Storage：与 localStorage 用法相同，但数据仅在当前会话（标签页）有效，关闭页面即清除，适合更临时的场景。
- 服务端传递（推荐生产环境）：Django 模板中可通过视图函数将 request.POST.get('Employee_Mail') 传入第二页上下文，再用 {{ email }} 渲染。安全性更高，且规避客户端篡改风险。
✅ 最佳实践总结
- 始终检查输入值是否存在（.trim() + if (email)），避免空字符串污染存储；
- 使用语义清晰的 localStorage key（如 'userEmail' 而非 'mail'），便于维护；
- 在第二页填充后，可根据业务需要调用 localStorage.removeItem('userEmail') 清理数据，防止残留；
- 若项目已引入 jQuery 或现代框架（Vue/React），可封装为可复用逻辑，但原生 JS 方案已足够轻量可靠。
通过以上三步，即可实现邮箱值在两个静态 HTML 页面间的无缝传递，提升用户体验的同时保持代码简洁可控。
