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

聖光之護

发布时间：2026-01-13 16:11:15

249人浏览过

来源于php中文网

原创

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

本文介绍如何将用户在第一个 html 页面输入的邮箱值，自动填充到第二个 html 页面的对应输入框中，重点讲解使用 `localstorage` 实现跨页数据传递的前端方案。

在构建多步骤表单（如登录流程：输入邮箱 → 发送 OTP → 验证 OTP）时，常需将前一步的用户输入（如邮箱）带入后续页面，避免重复填写。由于纯静态 HTML 页面之间无服务端上下文，推荐使用浏览器提供的客户端存储机制。其中，localStorage 是最简洁、兼容性好且无需后端配合的方案。

✅ 推荐方案：使用 localStorage 传递邮箱值

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

修改第一个 HTML 文件，在表单提交前将邮箱存入 localStorage。注意需为

添加 id="loginForm"（或直接通过类名/其他方式获取），并确保脚本在 DOM 加载完成后执行：

⚠️ 注意：不要在 submit 事件中调用 e.preventDefault()，否则表单将无法正常提交跳转；此处仅做数据暂存，提交行为由原自然触发。

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

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

? 提示：id="mail" 需与 HTML 中严格一致；若未设置 id，建议补充，否则需改用 name 或其他选择器（如 document.querySelector('input[name="Employee_Mail"]')）。

无界AI
一站式AI创作、搜索、分享服务

下载

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

? 替代方案简析（供进阶参考）

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 页面间的无缝传递，提升用户体验的同时保持代码简洁可控。

如何在 Vue 中实现链接点击节流（1500ms 防重复点击）

HTML5结构标签在Vue里怎么用_组件化开发适配方法【详解】

HTML5如何避免重复渲染_HTML5虚拟DOM使用技巧【方法】

Vue.js 中动态渲染带交互逻辑的自定义 HTML 元素的正确方式

html5源代码发行后怎么查看源码_查看已发布源码的方法【技巧】

HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载

相关标签:

vue react jquery html js 前端 go 浏览器 session 后端 ai win 邮箱 django jquery html String if 封装 Session mail 字符串 JS 事件 dom location 选择器 input

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：HTML5怎样在SPA中加密路由参数_HTML5SPA路由参数加密处理【攻略】下一篇：HTML5如何加入多行文本框_HTML5加入多行框步骤【入门】

作者最新文章

现代都市斗法罗刹？这款新作把印度神话玩出花！

2026-01-12 14:26

如何强制 Chrome 加载网页最新版本而不依赖手动清缓存

2026-01-12 14:27

如何解决笔记本触摸板“轻触点击”无法触发 onclick 事件的问题

2026-01-12 14:34

快手如何发图集作品

2026-01-12 14:43

360手机浏览器无痕模式怎么设置

2026-01-12 14:47

只差官宣了？《使命召唤》启动器代码出现任天堂标识

2026-01-12 14:53

商品怎么置顶视频号评论？评论区置顶广告位在哪？

2026-01-12 15:08

抖音私信获客适合什么行业？私信获客的收费标准是什么？

2026-01-12 15:13

商家回应一盒内存条能买上海一套房：还真差不多！

2026-01-12 15:18

新三国志曹操传沙盘1750-1949过关攻略

2026-01-12 15:23

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容，供大家免费下载体验。

150

2023.09.12

jquery怎么操作json

操作的方法有：1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”；3、“$.each(obj, callback)”；4、“$.ajax()”。更多jquery怎么操作json的详细内容，可以访问本专题下面的文章。

309

2023.10.13

jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题，详情请看本专题下面的文章。php中文网欢迎大家前来学习。

393

2023.11.10