
本文介绍使用 localstorage 在前后端分离或 ejs 多页场景中跨页面共享用户输入数据的方法,并强调其适用边界与更安全的替代方案(如 session 或 jwt)。
在基于 Node.js + Express 的 Web 应用中,若需将登录页(如 login.ejs)中用户输入的用户名(txtUsername)自动填充到另一页面(如 profile.ejs 或 dashboard.ejs)的只读文本框中,由于 EJS 是服务端渲染模板,页面间无直接 DOM 上下文共享,因此必须借助客户端存储或服务端状态管理机制。
✅ 推荐方案:使用 localStorage(适用于非敏感、临时性展示场景)
localStorage 是浏览器提供的持久化键值存储,可在同源(相同协议、域名、端口)的不同页面间共享数据,实现简单、无需后端修改。
▪ 登录页(login.ejs):保存输入值
在表单提交前或输入时监听并存入 localStorage(推荐在 submit 事件中保存,避免频繁触发):
⚠️ 注意:不要在 oninput 中高频写入 localStorage(影响性能),且绝不建议存储密码、Token 等敏感信息。
▪ 目标页(如 profile.ejs):读取并填充值
在目标页面的 渲染后,从 localStorage 读取并赋值:
立即学习“前端免费学习笔记(深入)”;










