时间戳

首页 > 解决方案 > 在没有 jQuery 的情况下将对象存储在数据属性中

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

问题描述

我的问题基本上和这个问题完全一样。我只是想知道，是否有办法在没有 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>

标签： javascriptcustom-data-attribute

解决方案

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

推荐阅读