本文介绍使用 localstorage 在前后端分离或 ejs 多页场景中跨页面共享用户输入数据的方法，并强调其适用边界与更安全的替代方案（如 session 或 jwt）。
在基于 Node.js + Express 的 Web 应用中，若需将登录页（如 login.ejs）中用户输入的用户名（txtUsername）自动填充到另一页面（如 profile.ejs 或 dashboard.ejs）的只读文本框中，由于 EJS 是服务端渲染模板，页面间无直接 DOM 上下文共享，因此必须借助客户端存储或服务端状态管理机制。
✅ 推荐方案：使用 localStorage（适用于非敏感、临时性展示场景）
localStorage 是浏览器提供的持久化键值存储，可在同源（相同协议、域名、端口）的不同页面间共享数据，实现简单、无需后端修改。
▪ 登录页（login.ejs）：保存输入值
在表单提交前或输入时监听并存入 localStorage（推荐在 submit 事件中保存，避免频繁触发）：
<form id="loginForm">
<div class="mb-3">
<label for="txtUsername" class="form-label">Kullanıcı Adı</label>
<input type="text" class="form-control" id="txtUsername" name="txtUsername" required>
</div>
<div class="mb-3">
<label for="txtPassword" class="form-label">Şifre</label>
<input type="password" class="form-control" id="txtPassword" name="txtPassword" required>
</div>
<button type="submit" class="btn btn-primary">Giriş Yap</button>
</form>
<script>
document.getElementById('loginForm').addEventListener('submit', function(e) {
const username = document.getElementById('txtUsername').value.trim();
if (username) {
localStorage.setItem('savedUsername', username); // 使用语义化 key
}
});
</script>⚠️ 注意：不要在 oninput 中高频写入 localStorage（影响性能），且绝不建议存储密码、Token 等敏感信息。
▪ 目标页（如 profile.ejs）：读取并填充值
在目标页面的 <input> 渲染后，从 localStorage 读取并赋值：
立即学习“前端免费学习笔记（深入）”；
<input
class="form-control"
type="text"
id="txtUsername"
name="txtUsername"
value=""
placeholder="kullanıcı ismi"
disabled>
</body>
<script>
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
const savedUsername = localStorage.getItem('savedUsername');
if (savedUsername) {
document.getElementById('txtUsername').value = savedUsername;
}
});
</script>✅ 优势：零服务端依赖、开发快捷、适合原型或内部工具。
❌ 局限：数据仅限客户端、可被用户篡改、不跨设备、不安全——严禁用于认证凭证传输。
? 更安全的生产级方案（推荐）
- Session（Express-session）：将用户名存入服务端 session，在跳转时通过 res.redirect() 并在目标 EJS 中用 <%= req.session.username %> 渲染。
- JWT（JSON Web Token）：登录成功后签发 Token，前端存入 httpOnly Cookie 或内存，后续请求携带验证，服务端解码后注入 EJS 上下文。
- URL 参数（临时）：res.redirect('/profile?user=' + encodeURIComponent(username))，但需注意长度与安全性（不可传敏感信息，且易被记录）。
✅ 总结
| 场景 | 方案 | 是否推荐 |
|---|---|---|
| 快速原型 / 内部演示 | localStorage | ✅（按本文方式） |
| 用户体验优化（如预填昵称） | Session + EJS 变量 | ✅✅✅ |
| 安全登录态管理 | JWT + HttpOnly Cookie | ✅✅✅✅ |
| 传递密码/Token/权限信息 | ❌ 任何客户端存储 | ❌ 绝对禁止 |
请始终遵循“敏感数据不出服务端”的安全原则——localStorage 仅作轻量级 UI 状态同步之用。
