如何在不同 HTML/EJS 页面间安全传递表单数据（如用户名）
#技术教程 发布时间： 2026-01-13
本文介绍使用 localstorage 在前后端分离的 html/ejs 页面间跨页传递文本框数据的方法，并强调其适用场景与安全边界，同时提供可直接运行的示例代码及更优的生产级替代方案（如 session 或 jwt）。
在 Web 开发中，常需将用户在登录页（如 login.ejs）输入的用户名，自动填充到后续页面（如 profile.ejs 或 dashboard.ejs）的只读文本框中。由于 EJS 是服务端模板引擎，不同 .ejs 文件渲染为独立的 HTML 响应，客户端无法直接共享 DOM 或变量，因此必须借助浏览器提供的客户端存储机制或服务端状态管理。
✅ 推荐方案：使用 localStorage（适用于原型/非敏感场景）
localStorage 是最轻量、零后端改造的跨页数据传递方式，适合演示、内部工具或仅需临时展示用户名的场景（注意：绝不可用于密码、Token 等敏感信息）。
▪ 第一步：在登录页（如 login.ejs）保存用户名
监听输入或表单提交事件，将值写入 localStorage：
▪ 第二步：在目标页（如 profile.ejs）读取并填充
在页面加载完成后，从 localStorage 读取并赋值给目标 ：
⚠️ 重要注意事项：localStorage 数据永久存储于浏览器，除非手动清除或调用 localStorage.removeItem()；同源策略限制：两页必须同协议、同域名、同端口（如均为 http://localhost:3000）；不安全！禁止存储密码、JWT、Session ID 等敏感凭证——攻击者可通过 XSS 窃取；移动端或隐私模式下可能被禁用，需做 try/catch 或存在性判断。
? 生产环境推荐：服务端状态管理（Node.js + Express + Session）
对于真实项目，应使用服务端会话（Session）或 Token 认证（如 JWT），确保数据不暴露于前端且具备时效性与验证能力：
// 示例：Express 中启用 session（需安装 express-session）
const session = require('express-session');
app.use(session({
secret: 'your-strong-secret-key',
resave: false,
saveUninitialized: false,
cookie: { secure: false, maxAge: 30 * 60 * 1000 } // 30分钟
}));登录成功后存入 session：
app.post('/login', (req, res) => {
const { txtUsername } = req.body;
req.session.username = txtUsername; // 安全存储于服务端
res.redirec
t('/profile');
});
t('/profile');
});在 profile.ejs 中直接使用 EJS 变量渲染：
✅ 总结
| 方案 | 适用场景 | 安全性 | 实现复杂度 | 持久性 |
|---|---|---|---|---|
| localStorage | 快速原型、内部工具、非敏感字段 | ❌ 低 | ⭐☆☆☆☆ | 永久（浏览器级） |
| Session（服务端） | 生产环境、含认证逻辑的系统 | ✅ 高 | ⭐⭐⭐☆☆ | 可配置过期时间 |
| JWT（无状态） | 分布式系统、API 优先架构 | ✅ 高 | ⭐⭐⭐⭐☆ | 依赖 token 过期 |
选择方案前，请始终问自己：这个数据是否允许被用户查看、修改或持久保存？ —— 若答案是否定的，请坚定使用服务端状态管理。
技术教程SEO上一篇 : 如何高效地在状态依赖型树结构中求解最大累积收益路径
下一篇 : 如何在 Go 中不声明变量直接调用结构体方法
-
SEO外包最佳选择国内专业的白帽SEO机构，熟知搜索算法，各行业企业站优化策略！
SEO公司
-
可定制SEO优化套餐基于整站优化与品牌搜索展现，定制个性化营销推广方案！
SEO套餐
-
SEO入门教程多年积累SEO实战案例，从新手到专家，从入门到精通，海量的SEO学习资料！
SEO教程
-
SEO项目资源高质量SEO项目资源，稀缺性外链，优质文案代写，老域名提权，云主机相关配置折扣！
SEO资源
-
SEO快速建站快速搭建符合搜索引擎友好的企业网站，协助备案，域名选择，服务器配置等相关服务！
SEO建站
-
快速搜索引擎优化建议没有任何SEO机构，可以承诺搜索引擎排名的具体位置，如果有，那么请您多注意！专业的SEO机构，一般情况下只能确保目标关键词进入到首页或者前几页，如果您有相关问题，欢迎咨询！
