如何在<head>中存储data-*属性？咨询最佳实践方案

嘿，这个问题我之前也碰到过不少次，确实有点纠结——既要在里存数据，又想用类似data属性的方式方便调用，下面给你几个靠谱的解决方案：

方案1：用<script type="application/json">存结构化数据 #

这是我最推荐的方式，完全符合HTML规范，还能存复杂的结构化数据，不限于单个键值对。写法如下：

<head>
  <script type="application/json" id="pendo_data">
    {
      "user-id": "12345",
      "user-name": "John Doe",
      "plan-type": "pro"
    }
  </script>
  <script>
    // jQuery读取方式
    const data = JSON.parse($('#pendo_data').text());
    console.log(data['user-id']); // 输出12345
    
    // 原生JS读取也一样方便
    // const data = JSON.parse(document.getElementById('pendo_data').textContent);
  </script>
</head>

这种方式的优势很明显：合法合规（script标签在里完全没问题），支持嵌套、数组这类复杂数据，而且不会渲染任何可见元素，完全不影响页面布局。

方案2：把带data属性的元素放在最顶部 #

如果你坚持想用jQuery的.data()方法直接调用，那可以把这个元素放在最开头，设置成隐藏状态就行——既不影响页面，又能正常获取数据：

<body>
  <div id="pendo_data" style="display: none;" data-user-id="12345" data-user-name="John Doe"></div>
  <!-- 其他页面内容 -->
  <script>
    console.log($('#pendo_data').data('user-id')); // 输出12345
  </script>
</body>

虽然元素不在里，但实际使用几乎没区别，DOM加载完成后就能访问，隐藏元素也不会对页面有任何干扰。

方案3：用自定义标签（适合简单键值对） #

如果你只是存单个简单值，其实标签也能凑合用，只是调用方式不是.data()而已：

<head>
  <meta name="pendo-user-id" content="12345">
  <script>
    console.log($('meta[name="pendo-user-id"]').attr('content')); // 输出12345
  </script>
</head>

这个方式的缺点是不适合存复杂数据，每个值都要单独写一个标签，灵活性不如前两种，但胜在简单直接。

总结一下：复杂数据优先选方案1；一定要用.data()方法就选方案2；简单单个值可以考虑方案3。

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