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

<!-- 在第一个 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()，否则表单将无法正常提交跳转；此处仅做数据暂存，提交行为由原 自然触发。

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

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

Is This Image NSFW?

图片安全检测，AI分析图像是否适合安全工作

下载

<!-- 在第二个 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 中 严格一致；若未设置 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 页面间的无缝传递，提升用户体验的同时保持代码简洁可控。