使用HTML meta标签存储自定义元数据供JS读取是否为不良实践？

这种做法完全可行，算不上不良实践，很多成熟网站都在采用——本质上这就是服务端向前端传递初始化数据的常规方案之一，特别适配你这种不想发起冗余二次请求的场景。

核心结论：用meta标签没问题 #

• 符合语义：meta标签的设计初衷就是存储页面元数据，把服务端传递的初始化数据放在这里，逻辑上更通顺，比藏在body的div里更贴合标签的语义定位。
• 无兼容性风险：所有主流浏览器都能正常读取meta标签的属性，只要数据格式合法，不会出现渲染或读取异常。

需要注意的细节 #

• 数据格式要规范：你示例里的{ name: 'test' }不是标准JSON（属性名未加双引号），后续如果要转成JSON对象会报错，建议服务端输出标准JSON字符串，比如{"name":"test"}。
• 别存敏感数据：meta标签内容会直接暴露在HTML源码中，不要存放密码、私密token这类敏感信息，防止被爬虫或恶意用户获取。
• 控制数据体积：meta标签不适合存储大体积数据（比如复杂列表、大段文本），这类场景建议用script标签直接输出JSON变量，示例：

<script>
  const user = {"name":"test"};
</script>

这种方式读取更直接，也能避免属性长度限制的潜在问题。

和body中用div的对比 #

两种方案都能实现需求，但meta标签在语义上更贴合“元数据”的定位，而div属于内容展示标签，用来存初始化数据有点偏离标签的设计用途。不过实际开发中，只要能解决问题，两种方案都可接受，主要看团队的编码规范偏好。

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