我使用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标记中存储实际对象的想法吗？
答案 0 :(得分：135)
实际上，你的最后一个例子是：
<div data-foobar='{"foo":"bar"}'></div>
似乎运作良好（见http://jsfiddle.net/GlauberRocha/Q6kKU/）。
好消息是data-属性中的字符串会自动转换为JavaScript对象。相反，我认为这种方法没有任何缺点！一个属性足以存储整个数据集，可以通过对象属性在JavaScript中使用。
（注意：对于自动赋予Object类型而不是String类型的数据属性，您必须小心编写有效的JSON，特别是将键名用双引号括起来。）
答案 1 :(得分：124)
而不是将其嵌入文本中只需使用$('#myElement').data('key',jsonObject);
它实际上不会存储在html中，但是如果你使用的是jquery.data，那么所有这些都是抽象的。
要恢复JSON 不解析，只需致电：
var getBackMyJSON = $('#myElement').data('key');
如果您获得[Object Object]而不是直接JSON，只需通过数据密钥访问您的JSON：
var getBackMyJSON = $('#myElement').data('key').key;
答案 2 :(得分：27)
这就是我的工作方式。
<强>对象
.h1, .h2, .h3, h1, h2, h3 {
margin-top: 20px;
margin-bottom: 10px;
}
设置
使用encodeURIComponent()对字符串化对象进行编码并设置为属性：
var my_object ={"Super Hero":["Iron Man", "Super Man"]};
获取
要将值作为对象获取，请使用decodeURIComponent()属性值解析已解码的值：
var data_str = encodeURIComponent(JSON.stringify(my_object));
$("div#mydiv").attr("data-hero",data-str);
答案 3 :(得分：12)
对我来说，它的工作方式就像那样，因为我需要将它存储在模板中 ......
// Generate HTML
var gridHtml = '<div data-dataObj=\''+JSON.stringify(dataObj).replace(/'/g, "\\'");+'\'></div>';
// Later
var dataObj = $('div').data('dataObj'); // jQuery automatically unescape it
答案 4 :(得分：8)
通过将serialized string转换为base64，可以解决存储序列化数据的许多问题。
可以在几乎任何地方接受base64字符串而不用担心。
看看：
WindowOrWorkerGlobalScope.btoa()方法创建base-64编码 来自String对象的ASCII字符串，其中每个字符都在 string被视为二进制数据的字节。
WindowOrWorkerGlobalScope.atob()函数解码一串数据 已使用base-64编码进行编码。
根据需要转换为/。
答案 5 :(得分：3)
我的诀窍是在键和值周围添加双引号。如果你使用像json_encode这样的php函数会给你一个json编码的字符串，并想知道如何对你的编码进行编码。
jQuery（＆＃39;＃elm-id＆＃39;）。数据（＆＃39; datakey＆＃39;）将返回字符串的对象，如果字符串已正确编码作为json。
根据jQuery文档：（http://api.jquery.com/jquery.parsejson/）
传入格式错误的JSON字符串会导致抛出JavaScript异常。例如，以下是所有无效的JSON字符串：
答案 6 :(得分：1)
有一种更好的方式将JSON存储在HTML中：
HTML
<script id="some-data" type="application/json">{"param_1": "Value 1", "param_2": "Value 2"}</script>
JavaScript
JSON.parse(document.getElementById('some-data').textContent);
答案 7 :(得分：0)
使用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" }
答案 8 :(得分：0)
出于某种原因，只有在页面上使用过一次才接受的答案对我有用，但在我的情况下，我试图在页面上的许多元素上保存数据，并且除了第一个元素之外，数据在某种程度上都丢失了
作为替代方案，我最终将数据写入dom并在需要时将其解析回来。也许它的效率较低，但是为了我的目的而工作得很好，因为我真的是数据原型，而不是为生产而写。
保存我使用的数据：
$('#myElement').attr('data-key', JSON.stringify(jsonObject));
然后读回数据与接受的答案相同，即：
var getBackMyJSON = $('#myElement').data('key');
如果我使用Chrome的调试器检查元素，这样做也会使数据显示在dom中。
答案 9 :(得分：0)
.data()适用于大多数情况。我遇到问题的唯一一次是JSON字符串本身只有一个引号。我找不到任何简单的方法来解决这个问题（使用Coldfusion作为服务器语言）：
<!DOCTYPE html>
<html>
<head>
<title>
Special Chars in Data Attribute
</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(function(){
var o = $("##xxx");
/**
1. get the data attribute as a string using attr()
2. unescape
3. convert unescaped string back to object
4. set the original data attribute to future calls get it as JSON.
*/
o.data("xxx",jQuery.parseJSON(unescape(o.attr("data-xxx"))));
console.log(o.data("xxx")); // this is JSON object.
});
</script>
<title>
Title of the document
</title>
</head>
<body>
<cfset str = {name:"o'reilly's stuff",code:1}>
<!-- urlencode is a CF function to UTF8 the string, serializeJSON converts object to strin -->
<div id="xxx" data-xxx='#urlencodedformat(serializejson(str))#'>
</div>
</body>
</html>
答案 10 :(得分：0)
!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$("#btn1").click(function()
{
person = new Object();
person.name = "vishal";
person.age =20;
$("div").data(person);
});
$("#btn2").click(function()
{
alert($("div").data("name"));
});
}）;
</script>
<body>
<button id="btn1">Attach data to div element</button><br>
<button id="btn2">Get data attached to div element</button>
<div></div>
</body>
</html>
Anser:-Attach data to selected elements using an object with name/value pairs.
GET value using object propetis like name,age etc...
答案 11 :(得分：0)
此代码对我来说很好用。
使用btoa编码数据
let data_str = btoa(JSON.stringify(jsonData));
$("#target_id").attr('data-json', data_str);
然后用atob解码
let tourData = $(this).data("json");
tourData = atob(tourData);
答案 12 :(得分：0)
结合使用window.btoa和window.atob以及
JSON.stringify和JSON.parse。
-这适用于包含单引号的字符串
编码数据：
var encodedObject = window.btoa(JSON.stringify(dataObject));
解码数据：
var dataObject = JSON.parse(window.atob(encodedObject));
这里是一个示例，说明如何在以后构造和解码数据 点击事件。
构造html并对数据进行编码：
var encodedObject = window.btoa(JSON.stringify(dataObject));
"<td>" + "<a class='eventClass' href='#' data-topic='" + encodedObject + "'>"
+ "Edit</a></td>"
在点击事件处理程序中解码数据：
$("#someElementID").on('click', 'eventClass', function(e) {
event.preventDefault();
var encodedObject = e.target.attributes["data-topic"].value;
var dataObject = JSON.parse(window.atob(encodedObject));
// use the dataObject["keyName"]
}