本文介绍如何将用户在第一个 html 页面输入的 邮箱 地址，自动填充到第二个 html 页面的对应输入框中，重点讲解使用 localstorage 实现跨页面数据传递的 前端 方案。
在 Web 开发中，当需要在多个独立 HTML 页面之间共享用户输入（例如登录流程中的邮箱），且不依赖 后端 状态管理时，localStorage 是一种轻量、可靠且兼容性良好的前端解决方案。它允许你在 浏览器 中持久化保存键值对，数据在页面跳转甚至关闭标签页后仍可读取（除非手动清除）。
✅ 正确实现步骤
第一步：在第一个 HTML 页面中保存邮箱值
你需要为表单添加 id（如 id=”login-form”），并在提交前捕获邮箱输入值，存入 localStorage。注意：原始代码中表单未设置 id，需补充；同时应避免默认提交导致页面刷新丢失 JS 执行机会——推荐使用 e.preventDefault() 或确保脚本在 DOM 加载后执行。
修改后的第一页面关键部分如下：
⚠️ 注意：不要在 submit 事件中直接调用 localStorage.setItem() 后任由表单提交——若后端 action 是跳转新页面（如 /otp-validate/），则 JS 保存操作已生效；但若 action=”” 且无服务端路由处理，建议显式重定向以确保行为可控：e.preventDefault(); localStorage.setItem(‘user_email’, email); window.location.href = ‘second.html’; // 替换为你的第二页路径
第二步：在第二个 HTML 页面中读取并填充邮箱
确保目标 具有唯一 id（如 id=”mail”），并在页面加载完成后从 localStorage 取值赋给其 value 属性：
立即学习 “ 前端免费学习笔记（深入）”；
✅ 推荐使用 DOMContentLoaded 而非 window.onload，因为它在 DOM 构建完成即触发，无需等待图片等资源加载，响应更快。
? 其他可行方案对比（简要）
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| URL 查询参数 (?email=xxx) | 简单直观、无需存储、可分享链接 | 邮箱暴露在地址栏、长度受限、需编码 / 解码 | 快速原型或低敏感数据 |
| sessionStorage | 仅当前会话有效、更安全 | 关闭标签页即丢失 | 单次流程强绑定（如多步表单） |
| 后端传递（如 Django 模板变量） | 安全、可控、支持校验 | 需服务端逻辑配合、增加请求复杂度 | 生产环境推荐（尤其涉及认证） |
✅ 最佳实践建议
- ?️ 安全性提醒 ：localStorage 数据可被前端任意脚本读写， 切勿存放密码、Token 等敏感信息；邮箱虽非高危，也建议结合后端二次校验。
- ? 清理机制：在 OTP 验证成功或用户退出时，调用 localStorage.removeItem(‘user_email’) 清理残留数据。
- ? 跨域 限制 ：localStorage 遵循同源策略（协议 + 域名 + 端口），确保两页面部署在同一源下（如均为 http://localhost:8000/）。
通过以上方式，你就能无缝实现邮箱值在前后两个静态 HTML 页面间的自动传递，为后续 OTP 验证流程提供良好用户体验。
