Node.js页面间变量传递问题求助：LocalStorage等方案尝试失败

我懂你现在的困扰：想通过Node.js（Express）把后端的变量传到前端页面，试了localStorage和全局变量都没成功，还碰到Node没法访问浏览器window对象里localStorage的报错对吧？其实你已经走对了第一步——用res.render传递变量，但问题出在前端页面没有正确接收这个后端变量。

问题根源 #

首先得搞清楚：Node.js运行在服务器端，它根本访问不到浏览器的window对象（包括localStorage），所以直接在后端代码里碰localStorage肯定会报错。另外，你用res.render传了user变量，但前端是纯HTML文件，没有模板引擎帮你把后端变量插值到页面里，所以前端JS里的user自然是未定义的。

解决方案 #

我们可以借助EJS模板引擎（它和HTML语法几乎一致，上手特别快）来把后端变量渲染到前端页面中，步骤如下：

1. 先安装EJS模板引擎：

npm install ejs

2. 修改后端代码test.js，设置模板引擎并完善路由：

var express = require('express')
var session = require('express-session')
var app = express()

// 设置模板引擎为EJS
app.set('view engine', 'ejs')
// 如果想保留.html后缀，配置让EJS解析HTML文件
app.engine('html', require('ejs').renderFile)

// 解析POST请求的表单数据（如果需要接收前端提交的数据）
app.use(express.urlencoded({ extended: true }))

app.post('/test1', function(req, res){
  var user = "Jonhy DEEPPP";
  console.log(user);
  // 渲染页面并传递user变量
  res.render('test1.html', { user: user });
});

// 启动服务器，监听3000端口
app.listen(3000, () => {
  console.log('Server running on port 3000')
})

3. 修改前端页面test1.html，用模板语法把后端变量注入到JS中：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
<script>
  // 用EJS插值语法把后端的user变量传递到前端JS
  var user = '<%= user %>';
  alert(user);
</script>
</body>
</html>

补充说明 #

• 如果你不想用EJS，也可以选Pug、Handlebars等其他模板引擎，核心逻辑都是一样的：通过模板引擎把后端变量渲染到页面中。
• 关于localStorage：它是浏览器端的存储方案，只能在前端JS里使用。如果需要前后端共享持久化数据（比如用户登录状态），更推荐用你已经引入的express-session或者Cookie，而不是localStorage。

内容的提问来源于stack exchange，提问作者Faust