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

本文介绍使用 localstorage 在前后端分离的 html/ejs 页面间跨页传递文本框数据的方法，并强调其适用场景与安全边界，同时提供可直接运行的示例代码及更优的生产级替代方案（如 session 或 jwt）。

在 Web 开发中，常需将用户在登录页（如 login.ejs）输入的用户名，自动填充到后续页面（如 profile.ejs 或 dashboard.ejs）的只读文本框中。由于 EJS 是服务端模板引擎，不同 .ejs 文件渲染为独立的 HTML 响应，客户端无法直接共享 DOM 或变量，因此必须借助浏览器提供的客户端存储机制或服务端状态管理。

✅ 推荐方案：使用 localStorage（适用于原型/非敏感场景）

localStorage 是最轻量、零后端改造的跨页数据传递方式，适合演示、内部工具或仅需临时展示用户名的场景（注意：绝不可用于密码、Token 等敏感信息）。

▪ 第一步：在登录页（如 login.ejs）保存用户名

监听输入或表单提交事件，将值写入 localStorage：

<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="saveToStorage()">
  </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 saveToStorage() {
  const username = document.getElementById('txtUsername').value.trim();
  if (username) {
    localStorage.setItem('savedUsername', username);
  }
}
// 可选：提交时再次确认保存（防输入后未触发 oninput）
document.getElementById('loginForm').addEventListener('submit', function() {
  saveToStorage();
});
</script>

▪ 第二步：在目标页（如 profile.ejs）读取并填充

在页面加载完成后，从 localStorage 读取并赋值给目标 ：

立即学习“前端免费学习笔记（深入）”；

AletheaAI

世界上第一个从自然语言描述中生成交互式 AI 角色的多模态 AI 系统。

下载

<input class="form-control" 
       type="text" 
       id="txtUsername" 
       name="txtUsername" 
       value="" 
       placeholder="kullanıcı ismi" 
       disabled>
<!-- 注意：此处 disabled 属性会阻止用户编辑，但 value 仍可被 JS 赋值 -->

<script>
document.addEventListener('DOMContentLoaded', function() {
  const saved = localStorage.getItem('savedUsername');
  if (saved) {
    document.getElementById('txtUsername').value = saved;
  }
});
</script>

⚠️ 重要注意事项：localStorage 数据永久存储于浏览器，除非手动清除或调用 localStorage.removeItem()；同源策略限制：两页必须同协议、同域名、同端口（如均为 http://localhost:3000）；不安全！禁止存储密码、JWT、Session ID 等敏感凭证——攻击者可通过 XSS 窃取；移动端或隐私模式下可能被禁用，需做 try/catch 或存在性判断。

? 生产环境推荐：服务端状态管理（Node.js + Express + Session）

对于真实项目，应使用服务端会话（Session）或 Token 认证（如 JWT），确保数据不暴露于前端且具备时效性与验证能力：

// 示例：Express 中启用 session（需安装 express-session）
const session = require('express-session');
app.use(session({
  secret: 'your-strong-secret-key',
  resave: false,
  saveUninitialized: false,
  cookie: { secure: false, maxAge: 30 * 60 * 1000 } // 30分钟
}));

登录成功后存入 session：

app.post('/login', (req, res) => {
  const { txtUsername } = req.body;
  req.session.username = txtUsername; // 安全存储于服务端
  res.redirect('/profile');
});

在 profile.ejs 中直接使用 EJS 变量渲染：

<input class="form-control" 
       type="text" 
       id="txtUsername" 
       name="txtUsername" 
       value="<%= session.username || '' %>" 
       placeholder="kullanıcı ismi" 
       disabled>

✅ 总结

选择方案前，请始终问自己：这个数据是否允许被用户查看、修改或持久保存？ —— 若答案是否定的，请坚定使用服务端状态管理。