本文介绍使用 localstorage 在两个独立页面（如登录页与用户信息页）间安全传递文本框数据的方法，并提供可直接运行的示例代码及关键注意事项。
在 Web 开发中，常需将用户在某一页（如登录表单）输入的数据，自动填充到另一页面（如个人资料预览页）的对应字段中。由于 EJS 模板通常渲染为独立 HTML 页面，且前后端分离场景下无法直接共享 DOM 状态，推荐采用浏览器端轻量级持久化方案——localStorage。
✅ 实现原理
localStorage 是浏览器提供的键值对存储机制，数据在同源（协议+域名+端口）下持久保存，页面刷新或跳转后仍可读取。其核心操作仅两步：
- 存：在源页面（如 login.ejs）监听输入变化，调用 localStorage.setItem(key, value)；
- 取：在目标页面（如 profile.ejs）加载时，用 localStorage.getItem(key) 读取并赋值给目标 元素。
? 示例代码（适配 EJS 场景）
登录页（login.ejs）中添加监听逻辑：
<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
oninput="saveUsernameToStorage()">
</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>
function saveUsernameToStorage() {
const username = document.getElementById('txtUsername').value.trim();
if (username) {
localStorage.setItem('user_username', username); // 使用语义化 key 名
}
}
</script>目标页（profile.ejs）中自动填充：
立即学习“前端免费学习笔记（深入）”；
<input class="form-control"
type="text"
id="txtUsername"
name="txtUsername"
value=""
placeholder="kullanıcı ismi"
disabled>
<script>
// 页面加载完成后执行填充
document.addEventListener('DOMContentLoaded', () => {
const savedUsername = localStorage.getItem('user_username');
if (savedUsername) {
document.getElementById('txtUsername').value = savedUsername;
}
});
</script>⚠️ 重要注意事项
- 安全性警示：localStorage 不可用于存储密码、Token 或敏感凭证（如问题中提到的 txtPassword），因其易被 XSS 攻击窃取。生产环境应改用服务端 Session 或 JWT 配合 HTTP-only Cookie；
- 同源限制：确保两页面部署在同一域名和协议下（如均为 http://localhost:3000/），否则 localStorage 无法跨域访问；
- 清理建议：用户登出时，主动调用 localStorage.removeItem('user_username') 或 localStorage.clear() 清除残留数据；
- EJS 兼容性：上述纯前端方案完全兼容 EJS 模板，无需修改 Node.js 后端逻辑，适合快速原型开发。
通过该方案，你能在不依赖服务端状态的前提下，实现跨页面的用户体验连贯性——既简洁高效，又符合现代前端最佳实践。
