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