在没有 jQuery 的情况下将对象存储在数据属性中

Question

我的问题基本上就像这个问题。我只是想知道，是否有办法在没有 jQuery 的情况下实现这一点。

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

var div = document.getElementById("testDiv");

var obj = {name: "Test1", value: 100};

div.setAttribute("data-obj", obj);

var arr = [59, 40, 3, 2, 1, 0];

div.setAttribute("data-arr", arr);

console.log("Object-Value: "+div.dataset.obj+"; Type: "+(typeof div.dataset.obj)+"; Name: "+div.dataset.obj.name);

console.log("Array-Value: "+div.dataset.arr+"; Type: "+(typeof div.dataset.arr)+"; Third Value: "+div.dataset.arr[2]);

<div id="testDiv">This is a test.</div>

Answer 1

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 对象、数组或简单值。

Answer 2

您需要使用JSON.stringify（和parse读取）将对象/数组更改为 json（字符串）var obj = {name: "Test1", value: 100};var arr = [59, 40, 3, 2, 1, 0];testDiv.dataset.obj = JSON.stringify(obj);testDiv.dataset.arr = JSON.stringify(arr);console.log( JSON.parse(testDiv.dataset.obj).name );console.log( JSON.parse(testDiv.dataset.arr)[2] );<div id="testDiv"></div>