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

Question

我的问题基本上和this 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 将 object/array 更改为 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>

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

Store Object in data-attribute without jQuery

javascript

custom-data-attribute