本文介绍如何将用户在第一个html登录页输入的邮箱地址，自动带入第二个otp验证页的邮箱字段，重点讲解使用浏览器 localstorage 实现跨页数据传递的完整方案。
在前后端分离或轻量级静态页面跳转场景中，常需将用户在前一页输入的数据（如邮箱）无缝传递至下一页表单。由于 HTML 页面之间无天然状态共享机制，直接通过 URL 参数、localStorage 或 sessionStorage 是最常用且无需后端介入的前端方案。本文采用 localStorage —— 它持久存储于浏览器，同源页面可读写，适合本例中“输入 → 跳转 → 回填”的流程。
✅ 正确实现步骤
第一步：在首页面（登录页）保存邮箱值
需为表单添加 id="loginForm"（原代码中缺失），并在提交前捕获邮箱并存入 localStorage。注意：localStorage.setItem() 的键名需与第二页读取时一致（此处应统一为 'email'，原文答案中第二页误写为 "mail"，会导致取值失败）。
<!-- 在第一个HTML页面的 </form> 之后、</body> 之前添加 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('form.login');
const emailInput = document.getElementById('Employee_Mail');
form.addEventListener('submit', function(e) {
// 保存邮箱（确保非空）
if (emailInput.value.trim()) {
localStorage.setItem('email', emailInput.value.trim());
}
});
});
</script>⚠️ 注意：不要用 e.preventDefault() 阻止默认提交——因为您依赖表单 action="" 触发页面跳转；我们仅在跳转前做数据暂存。
第二步：在目标页（OTP页）回填邮箱
确保 OTP 页面的邮箱 <input> 具有唯一 ID（如 id="mail"），并在页面加载完成后从 localStorage 读取并赋值：
<!-- 在第二个HTML页面的 </form> 之后、</body> 之前添加 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const mailInput = document.getElementById('mail');
const savedEmail = localStorage.getItem('email');
if (savedEmail) {
mailInput.value = savedEmail;
// （可选）防止用户手动清空后 localStorage 仍残留旧值，可在此处清理：
// localStorage.removeItem('email');
}
});
</script>? 关键修正：原文答案中第二页使用 localStorage.getItem("mail")，但第一页存的是 'email'，键名不匹配将导致回填失败。务必保持键名一致（推荐 'email'）。
立即学习“前端免费学习笔记（深入）”；
? 补充说明与建议
- 安全性提示：localStorage 数据可被任意前端脚本读取，切勿存放敏感信息（如密码、完整OTP）。邮箱属于低敏信息，适用此方案。
- 兼容性：localStorage 支持所有现代浏览器（IE8+），无需额外 polyfill。
-
替代方案对比：
- ✅ URL Query Parameters：更透明、可分享，但邮箱暴露在地址栏，且长度受限；适合简单场景。
- ⚠️ sessionStorage：页面关闭即失效，适合单次会话，但新页面打开后若非同一会话（如新标签页），可能丢失。
- ❌ Cookies（纯前端）：操作复杂，有路径/域名限制，不推荐用于此简单需求。
- 健壮性增强：可在第二页增加校验逻辑，例如邮箱格式验证，或提供“修改邮箱”入口，避免用户无法更正误输内容。
通过以上两段简洁、可靠的 JavaScript 代码，即可实现邮箱值在两个静态 HTML 页面间的平滑传递与自动填充，无需修改后端逻辑，特别适合初学者快速落地登录流程优化。
