本文介绍如何将用户在第一个 html 页面输入的邮箱地址，自动填充到第二个 html 页面的对应输入框中，主要使用浏览器 localstorage 实现跨页面数据传递，无需后端参与，适合初学者快速上手。

要在两个独立的 HTML 页面之间传递用户输入（例如邮箱），最轻量、易实现且无需服务端配合的方式是利用浏览器的 localStorage API。它允许你在当前域名下持久化保存字符串数据，即使页面跳转或刷新也不会丢失（除非手动清除）。

✅ 正确实现步骤

第一步：在首页（登录页）保存邮箱值

你需要为表单添加 id="loginForm"（便于 JS 获取），并在提交前将邮箱存入 localStorage。注意：原始代码中表单无 id，需补充；同时推荐使用 preventDefault() 避免意外刷新，并确保 DOM 加载完成后再绑定事件。

修改第一个 HTML 的

JS X Monitor

X.com (Twitter) 账号监控自动化：定时抓取指定账号最新推文，发现新内容即时推送通知。

下载

及新增脚本如下：

<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>

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

方案	优点	缺点	适用场景
localStorage	简单、持久、无需后端	同源限制；用户可手动清除；不适用于敏感信息	推荐新手首选，如邮箱预填
URL 查询参数（?email=xxx）	无需存储，天然可见可调试	URL 长度限制；暴露信息；需服务端或 JS 解析	适合简单跳转，但需处理编码（encodeURIComponent）
sessionStorage	页面会话级，关闭标签即失效	生命周期短，不跨标签页	若仅需本次会话内传递
后端传递（如 Django 模板变量）	安全、可控、支持复杂逻辑	需服务端渲染/重定向逻辑，增加开发成本	生产环境推荐（如用 redirect('otp_page', email=email)）

✅ 最佳实践建议

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

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