Javascript 不使用jQuery将对象存储在数据属性中

我的问题基本上就是这样。 我只是想知道，如果没有jQuery，是否有办法实现这一点

以下代码不起作用。我也尝试过使用数组，但就像对象一样，它存储为字符串。是我做错了什么，还是在纯javascript中不可能

var div=document.getElementById（“testDiv”）；
var obj={name:“Test1”，值：100}；
div.setAttribute（“数据对象”，对象）；
var-arr=[59,40,3,2,1,0]；
div.setAttribute（“数据arr”，arr）；
log（“对象值：”+div.dataset.obj+“类型：”+（typeof div.dataset.obj）+“名称：”+div.dataset.obj.Name）；
log（“数组值：“+div.dataset.arr+”，类型：“+（typeof div.dataset.arr）+”；第三个值：“+div.dataset.arr[2]）
这是一个测试。
在将数据存储到属性中之前使用
JSON.stringify（）
。它基本上是将数据序列化为字符串

var div = document.getElementById("testDiv");
var obj = JSON.stringify({name: "Test1", value: 100});
div.setAttribute("data-obj", obj);

var arrayAsJSON = JSON.stringify([59, 40, 3, 2, 1, 0]);
div.setAttribute("data-arr", arrayAsJSON);

然后在获取属性值之后和呈现属性值之前使用
JSON.parse（）。这将根据您的情况将其反序列化回javascript对象、数组或简单值。
您需要使用
json将对象/数组更改为json（字符串）。stringify
（和
解析
以进行读取）


var obj={name:“Test1”，值：100}；
var-arr=[59,40,3,2,1,0]；
testDiv.dataset.obj=JSON.stringify（obj）；
testDiv.dataset.arr=JSON.stringify（arr）；
log（JSON.parse（testDiv.dataset.obj）.name）；
log（JSON.parse（testDiv.dataset.arr）[2]）
为什么要向DOM元素添加数据？我认为这不是一个好主意。你应该考虑创建一个带有元素ID（或者某种类型的唯一选择器）的对象作为键，数据本身作为一个属性。这样，您就可以轻松地获取数据，而不必担心序列化问题。@SatishKumar DOM元素将数据库条目可视化。用户可以选择某些设置，以便显示的数据相应地发生变化。因为有多个这样的条目，所以我想为每个DOM元素保存条目对象。你认为有没有更有效的方法来实现这一点？大多数现代开发都围绕着使UI依赖于数据见证框架，如Angular、React等，在这些框架中，数据被转换为UI。你改变了数据，用户界面也改变了，而不是相反。有很多方法，但最容易掌握的是
var-elementData={“testDiv”：{“obj”：{name:“Test1”，value:100}，“arr:[59,40,3,2,1,0]}；
然后取出数据，
var-obj=elementData.testDiv.obj
（或
elementData[“testDiv”].obj
如果您将id设置为字符串）。看起来很像@zhulien的现有答案，只是该答案有解释，而不仅仅是“Try”…@FayBoisam是的，它会的。甚至在示例中也有说明。请查看“arrayAsJSON”。它适用于每个javascript结构（对象、数组或简单值类型）。您需要注意循环引用，如果没有帮助，JSON无法处理循环引用。