本文介绍如何将用户在第一个 html 页面输入的邮箱地址，自动填充到第二个 html 页面的对应输入框中，主要使用浏览器 localstorage 实现跨页面数据传递，无需后端参与，适合初学者快速上手。
要在两个独立的 HTML 页面之间传递用户输入（例如邮箱），最轻量、易实现且无需服务端配合的方式是利用浏览器的 localStorage API。它允许你在当前域名下持久化保存字符串数据，即使页面跳转或刷新也不会丢失（除非手动清除）。
✅ 正确实现步骤
第一步：在首页（登录页）保存邮箱值
你需要为表单添加 id="loginForm"（便于 JS 获取），并在提交前将邮箱存入 localStorage。注意：原始代码中表单无 id，需补充；同时推荐使用 preventDefault() 避免意外刷新，并确保 DOM 加载完成后再绑定事件。
修改第一个 HTML 的 <form> 及新增脚本如下：
<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 最佳实践。
通过以上方式，你就能轻松实现跨页面表单数据的自动带入，为用户带来更流畅的登录体验。
