如何持久化Express中通过res.render传递给Pug模板的数据

核心逻辑是在Pug服务端渲染阶段，将后端传入的数据主动注入到前端可访问的上下文（全局作用域/DOM属性）中，有两种常用实现方式：

方案1：挂载为前端全局变量（最简便） #

直接在Pug模板的script标签内，将后端传入的序列化为JSON字符串，挂载到window全局对象上，所有前端脚本均可直接访问。

步骤示例 #

1. 你的Express接口代码保持不变，正常传递数据：

// Express 路由代码
const tableList = [{ tableName: "table name here", fieldNames: ['field1', 'field2'] }/* 你的原始数据 */]
res.render('你的pug模板文件名', { tableData: tableList })

2. 在Pug模板中添加script标签注入变量：

//- Pug 模板代码，放在页面任意位置，建议放在head或body末尾
script.
  // 注意!是Pug语法，用来关闭HTML转义，避免JSON引号被转义
  window.tableData = !{JSON.stringify(tableData)}

3. 事件处理函数中直接使用即可：

// 你的事件处理代码
document.querySelector('#tableSelect').addEventListener('change', (e) => {
  const selectedTableName = e.target.value
  // 直接访问全局变量获取完整数据
  const targetTable = window.tableData.find(item => item.tableName === selectedTableName)
  // 填充字段下拉框逻辑
  const fieldSelect = document.querySelector('#fieldSelect')
  fieldSelect.innerHTML = ''
  targetTable.fieldNames.forEach(field => {
    const opt = document.createElement('option')
    opt.value = field
    opt.textContent = field
    fieldSelect.appendChild(opt)
  })
})

注意：如果数据包含敏感信息不要使用该方案，挂载到全局变量后所有前端用户均可查看数据

方案2：存储到DOM自定义属性（无全局变量污染） #

如果不想污染全局作用域，可以将数据序列化后存到对应DOM元素的自定义data属性中，需要时读取解析即可。

步骤示例 #

1. 在Pug模板的表名下拉框元素上添加data属性：

//- Pug 模板代码，给select新增data-table-data属性
select#tableSelect(data-table-data=JSON.stringify(tableData))
  each item in tableData
    option(value=item.tableName)= item.tableName

2. 事件处理函数中读取解析属性：

document.querySelector('#tableSelect').addEventListener('change', (e) => {
  // 读取DOM属性并反序列化为JS对象
  const tableData = JSON.parse(e.target.dataset.tableData)
  const selectedTableName = e.target.value
  const targetTable = tableData.find(item => item.tableName === selectedTableName)
  // 后续填充字段下拉框逻辑和方案1完全一致
})

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