在不使用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将对象/数组更改为json（字符串）（并parse读取）

 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>