Хранить объект в data-атрибуте без 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 (строку), используя JSON.stringify (и 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>