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

<form id="loginForm" 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.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('loginForm');
    const emailInput = document.getElementById('Employee_Mail');

    form.addEventListener('submit', function(e) {
      // 保存邮箱（注意 key 名统一为 'email'，非 'mail'）
      const email = emailInput.value.trim();
      if (email) {
        localStorage.setItem('email', email);
      }
      // 可选：防止页面跳转时丢失数据（若 action="" 会刷新，建议改用 JS 跳转）
      // e.preventDefault();
      // window.location.href = 'second.html'; // 显式跳转更可控
    });
  });
</script>

⚠️ 注意：localStorage.setItem('email', ...) 中的键名必须与第二页读取时一致（即 'email'），原答案中第二页误写为 getItem("mail")，会导致取不到值，这是常见错误，务必修正。

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

确保邮箱输入框有 id="mail"（你已具备），然后在页面加载完成后从 localStorage 读取并赋值：

立即学习“前端免费学习笔记（深入）”；

<div class="field">
  <input type="text" id="mail" placeholder="Email Address" name="Employee_Mail" required>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const mailInput = document.getElementById('mail');
    const savedEmail = localStorage.getItem('email');
    if (savedEmail) {
      mailInput.value = savedEmail;
    }
  });
</script>

? 其他可行方案对比（简要）

✅ 最佳实践建议

• 始终校验输入：.trim() 去除空格，避免空字符串写入；
• 添加容错：读取时判断 null 或空值，避免异常；
• 敏感信息（如密码、OTP）切勿存入 localStorage；
• 若项目已用 Django，更健壮的做法是：首页面 POST 到视图 → 视图将邮箱存入 session → 渲染第二页时通过 {{ request.session.email }} 注入模板 —— 这样更安全且符合 Web 最佳实践。

通过以上方式，你就能轻松实现跨页面表单数据的自动带入，为用户带来更流畅的登录体验。