如何在不同 HTML/EJS 页面间安全传递表单输入值（如用户名）

本文介绍使用 localstorage 在前后端分离或 ejs 多页场景中跨页面共享用户输入数据的方法，并强调其适用边界与更安全的替代方案（如 session 或 jwt）。

在基于 Node.js + Express 的 Web 应用中，若需将登录页（如 login.ejs）中用户输入的用户名（txtUsername）自动填充到另一页面（如 profile.ejs 或 dashboard.ejs）的只读文本框中，由于 EJS 是服务端渲染模板，页面间无直接 DOM 上下文共享，因此必须借助客户端存储或服务端状态管理机制。

✅ 推荐方案：使用 localStorage（适用于非敏感、临时性展示场景）

localStorage 是浏览器提供的持久化键值存储，可在同源（相同协议、域名、端口）的不同页面间共享数据，实现简单、无需后端修改。

▪ 登录页（login.ejs）：保存输入值

在表单提交前或输入时监听并存入 localStorage（推荐在 submit 事件中保存，避免频繁触发）：

  
    Kullanıcı Adı
    
  
  
    Şifre
    
  
  Giriş Yap

⚠️ 注意：不要在 oninput 中高频写入 localStorage（影响性能），且绝不建议存储密码、Token 等敏感信息。

▪ 目标页（如 profile.ejs）：读取并填充值

在目标页面的 渲染后，从 localStorage 读取并赋值：

✅ 优势：零服务端依赖、开发快捷、适合原型或内部工具。
❌ 局限：数据仅限客户端、可被用户篡改、不跨设备、不安全——严禁用于认证凭证传输。

? 更安全的生产级方案（推荐）

• Session（Express-session）：将用户名存入服务端 session，在跳转时通过 res.redirect() 并在目标 EJS 中用 渲染。
• JWT（JSON Web Token）：登录成功后签发 Token，前端存入 httpOnly Cookie 或内存，后续请求携带验证，服务端解码后注入 EJS 上下文。
• URL 参数（临时）：res.redirect('/profile?user=' + encodeURIComponent(username))，但需注意长度与安全性（不可传敏感信息，且易被记录）。

✅ 总结

场景	方案	是否推荐
快速原型 / 内部演示	localStorage	✅（ 按本文方式）
用户体验优化（如预填昵称）	Session + EJS 变量	✅✅✅
安全登录态管理	JWT + HttpOnly Cookie	✅✅✅✅
传递密码/Token/权限信息	❌ 任何客户端存储	❌ 绝对禁止

请始终遵循“敏感数据不出服务端”的安全原则——localStorage 仅作轻量级 UI 状态同步之用。