本文介绍使用 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.redirect('/profile');
});在 profile.ejs 中直接使用 EJS 变量渲染：
✅ 总结
| 方案 | 适用场景 | 安全性 | 实现复杂度 | 持久性 |
|---|---|---|---|---|
| localStorage | 快速原型、内部工具、非敏感字段 | ❌ 低 | ⭐☆☆☆☆ | 永久（浏览器级） |
| Session（服务端） | 生产环境、含认证逻辑的系统 | ✅ 高 | ⭐⭐⭐☆☆ | 可配置过期时间 |
| JWT（无状态） | 分布式系统、API 优先架构 | ✅ 高 | ⭐⭐⭐⭐☆ | 依赖 token 过期 |
选择方案前，请始终问自己：这个数据是否允许被用户查看、修改或持久保存？ —— 若答案是否定的，请坚定使用服务端状态管理。
