将JSON对象存储在HTML jQuery数据属性中
我使用data-方法在HTML标签中存储数据，如下所示：
<td><"button class='delete' data-imagename='"+results[i].name+"'>Delete"</button></td>然后，我在一个回调中检索数据，如下所示：
$(this).data('imagename');这很好用。我坚持的是试图保存对象，而不是仅仅保存它的一个属性。我试着这样做：
<td><button class='delete' data-image='"+results[i]+"'>Delete</button></td>然后，我尝试像这样访问name属性：
var imageObj = $(this).data('image');
console.log('Image name: '+imageObj.name);日志告诉我undefined。所以看起来我可以在data-属性中存储简单的字符串，但是我不能存储JSON对象…
我也尝试过使用这个语法的孩子，但没有成功：
<div data-foobar='{"foo":"bar"}'></div>关于如何使用data-方法在HTML标记中存储实际对象，您有什么想法吗？
回答 8
Stack Overflow用户
发布于 2012-02-24 20:05:59
实际上，您的最后一个示例：
<div data-foobar='{"foo":"bar"}'></div>似乎运行良好(参见http://jsfiddle.net/GlauberRocha/Q6kKU/)。
有趣的是，data- attribute中的字符串会自动转换为JavaScript对象。相反，我看不出这种方法有什么缺点！一个属性足以存储整个数据集，随时可以通过对象属性在JavaScript中使用。
(注意:对于自动赋予类型Object而不是String的数据属性，必须小心编写有效的JSON，特别是要用双引号将键名括起来)。
Stack Overflow用户
发布于 2015-11-19 05:14:18
使用documented jquery .data(obj) syntax允许您在DOM元素上存储对象。检查元素不会显示data-属性，因为没有为对象的值指定键。但是，对象中的数据可以使用.data("foo")按键引用，也可以使用.data()返回整个对象。
因此，假设您设置了一个循环和result[i] = { name: "image_name" }：
$('.delete')[i].data(results[i]); // => <button class="delete">Delete</delete>
$('.delete')[i].data('name'); // => "image_name"
$('.delete')[i].data(); // => { name: "image_name" }Stack Overflow用户
发布于 2016-03-05 10:01:16
由于某些原因，被接受的答案只有在页面上使用一次才有效，但在我的例子中，我试图保存页面上许多元素的数据，但不知何故，除了第一个元素之外，所有元素上的数据都丢失了。
作为另一种选择，我最终将数据写出到dom，并在需要时解析回来。也许它的效率较低，但对我的目的很有效，因为我实际上是在原型化数据，而不是为了生产而编写这些。
要保存我使用的数据：
$('#myElement').attr('data-key', JSON.stringify(jsonObject));然后读回数据与接受的答案相同，即：
var getBackMyJSON = $('#myElement').data('key');如果我要用Chrome的调试器检查元素，这样做也会使数据出现在dom中。
https://stackoverflow.com/questions/8542746
复制相似问题