如何用全局变量替代hidden input存储可全局访问且支持提交服务端的数据

替代方案整理 #

下面是三种最常用的落地方式，可根据你的使用场景选择：

方案1：单个隐藏input存储序列化JSON #

不用分散创建多个隐藏输入框，所有数据打包成JSON对象后序列化存入同一个隐藏input即可，完全兼容原有表单提交逻辑，前端读取也很方便：

<!-- 只需一个全局隐藏输入框 -->
<input type="hidden" id="globalData" name="globalData" >

// 存数据：把所有需要存储的字段打包成对象后序列化
const data = {
  sourceJson: "xxx",
  userId: 123,
  config: { theme: "dark", lang: "zh" }
}
document.getElementById("globalData").value = JSON.stringify(data)

// 任意脚本读取数据
const globalData = JSON.parse(document.getElementById("globalData").value)
const sourceJson = globalData.sourceJson

表单提交时这个字段会正常提交到服务端，服务端直接反序列化JSON就能拿到所有字段。

方案2：使用HTML5 data-* 全局属性 #

适合存储零散的小数据，语义化更强，不需要单独维护隐藏输入框：

<!-- 把数据挂在body节点的自定义属性上，支持多字段 -->
<body 
  data-source-json="xxx"
  data-user-id="123"
  data-theme="dark"
>

// 任意位置直接读取，属性名会自动转驼峰
const sourceJson = document.body.dataset.sourceJson
const userId = document.body.dataset.userId

需要提交数据时，在表单提交事件里统一把dataset的值注入提交数据即可：

document.querySelector("#submitForm").addEventListener("submit", (e) => {
  const formData = new FormData(e.target)
  // 批量注入所有全局data属性
  Object.entries(document.body.dataset).forEach(([key, value]) => {
    formData.append(key, value)
  })
  // 后续提交formData即可
})

方案3：全局命名空间变量+提交前动态注入 #

最灵活的方案，适合存储大量复杂结构的前端数据，读取效率最高：

// 提前在全局定义唯一命名空间，避免变量污染
window.APP_GLOBAL_DATA = {}

// 任意位置存数据
window.APP_GLOBAL_DATA.sourceJson = "xxx"
window.APP_GLOBAL_DATA.userInfo = { id: 123, name: "test" }

// 任意位置读数据
const sourceJson = window.APP_GLOBAL_DATA.sourceJson

提交时可以选择两种注入方式：

1. 动态创建隐藏input插入表单，兼容传统表单同步提交：

const form = document.querySelector("#submitForm")
const dataInput = document.createElement("input")
dataInput.type = "hidden"
dataInput.name = "globalData"
dataInput.value = JSON.stringify(window.APP_GLOBAL_DATA)
form.appendChild(dataInput)
form.submit()

2. 直接注入FormData，适合AJAX异步提交：

const formData = new FormData(document.querySelector("#submitForm"))
formData.append("globalData", JSON.stringify(window.APP_GLOBAL_DATA))
// 用fetch/axios提交formData即可

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