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

【问题标题】：Store Object in data-attribute without jQuery在没有 jQuery 的情况下将对象存储在数据属性中
【发布时间】：2019-10-19 08:12:39
【问题描述】：

我的问题基本上和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]);

&lt;div id="testDiv"&gt;This is a test.&lt;/div&gt;

【问题讨论】：

为什么要向 DOM 元素添加数据？我不认为这是个好主意。
您应该考虑创建一个对象，其中元素的 id（或某种唯一选择器）作为键，数据本身作为属性。然后就可以轻松获取数据，不用担心序列化。
@SatishKumar DOM 元素将数据库条目可视化。用户可以选择某些设置，以便显示的数据相应地改变。由于有多个这样的条目，我想为每个 DOM 元素保存条目对象。你认为有没有更有效的方法来解决这个问题？
大多数现代开发都围绕着使 UI 依赖于数据见证框架（如 Angular、React 等），将数据转换为 UI。您更改数据和 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）。

标签： javascript custom-data-attribute

【解决方案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 对象、数组或简单值，具体取决于您的情况。

【讨论】：

@FayBoisam 是的，它会的。甚至在示例中也说明了这一点。查看 'arrayAsJSON' 。它适用于每个 javascript 结构（对象、数组或简单值类型）。
您需要注意循环引用，如果没有一些帮助，JSON 无法处理。

【解决方案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] );

&lt;div id="testDiv"&gt;&lt;/div&gt;

【讨论】：

看起来很像@zhulien 的现有答案，除了答案有解释而不仅仅是“尝试”...