在客户端 js 文件中使用 pug 变量答案

【问题标题】：Use pug variable in client js file在客户端 js 文件中使用 pug 变量
【发布时间】：2020-07-14 21:29:24
【问题描述】：

我能够从节点 js 接收变量到 pug，当我在内联脚本中对其进行控制台时，我能够打印数据。但是如何将变量传递给 pug 文件中包含的外部客户端 js 文件

节点js：

res.render(home, {
  title: "home page",
  userId: id 
})

帕格：

body
  -var newId = userId;
script.
  var jsNewId = #{newId}
  console.log("jsNewId",jsNewId)

此 console.log 打印预期的 newid 值。我想向 pug 文件页脚中包含的 js 文件发送相同的值：

script(src="js/client.js type="text/javascript)

client.js

 $(document).ready(function () {
      var jsNewId = #{newId}  //cannot use this syntax 
   })

如何获取客户端js文件中的pug变量

【问题讨论】：

【解决方案1】：

要使用在外部 javascript 文件中的内联 script 标记中声明的 javascript 变量，您需要将其设为 global variable（不推荐），或使用类似 local storage 的内容：

在您的 Pug 文件中（确保在 body 内缩进您的 script 标签）

body
  - let newId = userId
  script.
    let jsNewId = #{newId}
    localStorage.setItem('jsNewId', jsNewId)

然后在你的 client.js 文件中：

$(document).ready(function () {
  let jsNewId = localStorage.getItem('jsNewId')
})

最好将您的 client.js 文件作为最后一项包含在 body 中，以确保 jsNewId 在尝试获取它之前存在于本地存储中。

【讨论】：