Javascript 在HTML数据属性上添加JSON不好吗？

由于HTML

data

attribute允许添加任何自定义数据，我想知道将一组

JSON

列表作为

data

属性是否是一个好主意？然后，使用

getAttribute（“data-x”）

的

JavaScript

事件可以轻松访问相应的

JSON

事实上，我的问题是：向

HTML

属性添加大量数据是否标准、高效、合理

比如说

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

---

或者一大组JSON数据必须存储在

标记中，

HTML

属性对于一大组数据来说是不合适的，即使对于

数据

属性也是如此。

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

例如，你可以这样做：

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

                   };

然后你有一些html，比如：

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

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

var myData = myBigJsonObj[dataId];

---

这是最好的方法

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

Javascript:

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

HTML:

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

---

请记住，无论哪种方式，您都需要转义正在插入HTML中的值，否则“杂散”字符将打断页面。

如果您想将对象

var dataObj={foo:'something'，bar:'something'}；

保存到HTML数据属性

首先考虑将对象字符串化，以便

var stringifiedDataObj=JSON.stringify（dataObj）；

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

jQuery.data（）

API

。其中，您的元素将是键，该键处的值可以是存储所需数据的对象。类似这样的内容（未经测试）：

（功能（全局）{
常量映射=新映射（）；
global.CustomData={
添加（元素、键、数据）{
如果（！map.has（元素））{
set（元素，{}）；
}
map.get（element）[key]=数据；
返回map.get（元素）；
},
获取（元素、键）{
如果（！map.has（元素））{
返回null；
}
如果（键！==未定义）{
返回map.get（元素）[key]；
}
返回map.get（元素）
},
移除（元件、键）{
如果（！map.has（元素））{
返回false；
}
删除map.get（元素）[key]；
if（Object.keys（map.get（element））.length==0）{
删除（元素）；
}
返回true；
},
清除（元素）{
如果（！map.has（元素））{
返回false；
}
删除（元素）；
返回true；
}
}
})（窗口）从技术上讲，你可以这样做，我也看到过一些网站这样做，但另一种解决方案是将JSON存储在
标记中，并在
数据
属性中引用脚本标记。这是一种比将数据作为JS对象存储在实际脚本中更好的解决方案，如果数据呈现到页面服务器端，b例如，内联脚本标记有CSP限制

HTML

将数据存储在脚本标记中会更好。将数据存储在数据属性中，虽然技术上可行，但这似乎是一种不好的做法。如果您真的愿意，可以这样做。HTML5没有指定属性长度的限制。（但您可能必须对其进行编码或其他操作。）@GJK：这取决于用例：如果所讨论的JSON对象是一个全局数据对象，那么您可能是对的；如果有多个类似的对象，每个对象都与特定的DOM元素关联，那么这正是数据属性的用途，因此在某个时候使用它们不一定是一种坏做法ll（当然，将整个内容作为字符串存储在单个属性中可能是可行的，但也可以选择将单个属性存储在不同的数据属性中）@GJK我不认为在数据属性中存储大量数据集是不好的做法。创建这样一个标记的原因就是为了存储数据。@GJK你能详细解释一下为什么你认为这是不好的做法吗？回顾过去，我应该澄清这完全取决于你的用例。如果你在页面加载时注入数据，它可能会e这是一个好主意。但是如果您使用数据属性来维护应用程序状态，您可能会遇到状态管理问题。我个人会避免在属性中放置大量数据，但我至少会鼓励人们考虑这是否是放置数据的好地方。这是一个非常聪明的解决方案！谢谢您。使用“myBigJsonObj[”属性“]=value；”可以动态创建和获取内容。这可能并不总是有效的。尤其是当您想从服务器端设置数据时。@theusguy在服务器上您可以输出带有数据变量的脚本标记。我相信如果您使用
JSON.parse
，字符会在必要时转义
<div data-foo="something" data-bar="something else"></div>

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

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

$(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);

    ...
});