35

由于 HTMLdata属性允许添加任何自定义数据，我想知道包含一组JSON列表作为data属性是否是个好主意？然后，JSON可以通过JavaScript带有 的事件轻松访问相应的内容getAttribute("data-x")。

其实我的问题是：将一大组数据添加到一个HTML属性中，是否标准、高效、合理？

例如

<div data-x="A LARGE SET OF JSON DATA" id="x">

或者大量的 JSON 数据必须存储在<script>标签中，而一个HTML属性不是一个适合大量数据的地方，即使对于data属性也是如此。

4

5 回答 5

40

您可以使用标识符来访问数据，而不是将所有内容存储在数据属性中。

因此，例如，您可以这样做：

var myBigJsonObj = { 
                      data1 : { //lots of data}, 
                      data2 : { //lots of data}                   

                   };

然后你有一些像这样的html：

<div data-dataId="data1" id="x">

您现在可以使用 jquery 来获取数据，如下所示：

var dataId = $('#x').attr('data-dataId');

var myData = myBigJsonObj[dataId];

这是最好的方法恕我直言。

于 2013-04-05T16:47:48.400 回答
3

假设您要将对象保存var dataObj = { foo: 'something', bar: 'something else' };到 html 数据属性。

考虑首先对对象进行字符串化，使得我们有 var stringifiedDataObj = JSON.stringify(dataObj);

然后您可以使用 jQuery 将 stringifiedDataObj 设置为数据属性，例如使用jQuery.data()API

于 2016-05-10T20:31:19.430 回答
2

虽然没有什么可以阻止您在数据属性中嵌入一长串 JSON，但可以说更“正确”的做法是为 JSON 数据的每个属性添加一个数据属性。例如：

Javascript：

var dataObj = { foo: 'something', bar: 'something else' }

HTML：

<div data-foo="something" data-bar="something else"></div>

这样，JSON 对象中的每条数据都对应于附加到 DOM 元素的单独的、可独立访问的数据。

请记住，无论哪种方式，您都需要转义要插入 HTML 的值 - 否则杂散的 " 字符会破坏您的页面。

于 2015-09-30T13:04:28.423 回答
1

从技术上讲，您可以，而且我已经看到几个站点这样做，但另一种解决方案是将您的 JSON 存储在<script>标签中，并在属性中放置对脚本标签的引用data。如果将数据呈现到页面服务器端，那么这比仅将数据作为 JS 对象存储在实际脚本中更好的解决方案，但是例如对内联脚本标签有 CSP 限制。

HTML

<div data-data-id="#MyScriptData" id="x"></div>

<script type="application/json" id="MyScriptData">
{
    "fruit": "apple",
    ...
}
</script>

JS

$(function () {
    var dataId = $("#x").data("data-id");
    var dataTag = $(dataId);
    var dataJson = dataTag.html(); // returns a string containing the JSON data
    var data = JSON.parse(dataJson);

    ...
});
于 2019-04-27T08:06:30.017 回答
0

您可以使用Map。您的元素将成为键，而该键的值可能是您存储所需数据的对象。像这样的东西（虽然没有测试）：

(function(global) {

  const map = new Map();

  global.CustomData = {
    add(element, key, data) {
      if (!map.has(element)) {
        map.set(element, {});
      }

      map.get(element)[key] = data;

      return map.get(element);
    },

    get(element, key) {
      if (!map.has(element)) {
        return null;
      }

      if (key !== undefined) {
        return map.get(element)[key];
      }

      return map.get(element)
    },

    remove(element, key) {
      if (!map.has(element)) {
        return false;
      }

      delete map.get(element)[key];

      if (Object.keys(map.get(element)).length === 0) {
        map.delete(element);
      }

      return true;
    },

    clear(element) {

      if (!map.has(element)) {
        return false;
      }

      map.delete(element);

      return true;
    }
  }

})(window);

于 2019-04-27T07:33:40.157 回答