如何在两个 HTML 页面间传递表单默认值（如邮箱）

⚠️ 注意：不要在 submit 事件中调用 e.preventDefault()，否则表单将无法正常提交跳转；此处仅做数据暂存，提交行为由原 自然触发。

第二步：在第二页面（OTP 验证页）读取并填充邮箱

在第二个 HTML 文件中，于页面加载完成时从 localStorage 读取值，并赋给目标输入框：

? 提示：id=”mail” 需与 HTML 中 严格一致；若未设置 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 页面间的无缝传递，提升用户体验的同时保持代码简洁可控。