将数据属性中的JSON对象存储在HTML jQuery中
我正在使用HTML标记中的data-方法来存储数据，如下所示：
<td><"button class='delete' data-imagename='"+results[i].name+"'>Delete"</button></td>
然后，我以这样的callback检索数据：
$(this).data('imagename');
这工作正常。 我所坚持的是试图保存对象而不是它的一个属性。 我试图做到这一点：
<td><button class='delete' data-image='"+results[i]+"'>Delete</button></td>
然后我尝试访问这样的名称属性：
var imageObj = $(this).data('image'); console.log('Image name: '+imageObj.name);
日志告诉我undefined 。 所以看起来像我可以在data-属性中存储简单的string，但我不能存储JSON对象…
我也试图用这个语法的孩子没有运气：
<div data-foobar='{"foo":"bar"}'></div>
有关如何使用data-方法在HTML标记中存储实际对象的任何想法？
$('#myElement').data('key',jsonObject);而不是将其embedded到文本中，只需使用$('#myElement').data('key',jsonObject);
它实际上不会被存储在HTML中，但如果您使用jquery.data，则无论如何都会将其抽象出来。
要获取JSON， 请不要parsing它 ，只需调用：
var getBackMyJSON = $('#myElement').data('key');
如果您正在获取[Object Object]而不是直接的JSON，只需通过数据键访问您的JSON：
var getBackMyJSON = $('#myElement').data('key').key;
其实，你最后一个例子：
<div data-foobar='{"foo":"bar"}'></div>
似乎运作良好（见http://jsfiddle.net/GlauberRocha/Q6kKU/ ）。
好的是，data-属性中的string自动转换为JavaScript对象。 这个方法我没有看到任何缺点，相反！ 一个属性足以存储一整套数据，可以通过对象属性在JavaScript中使用。
（注意：对于数据属性自动给定typesObject而不是String，你必须小心编写有效的JSON，特别是用双引号括住键名）。
对我来说就是这样，因为我需要将其存储在模板中 …
// Generate HTML var gridHtml = '<div data-dataObj=\''+JSON.stringify(dataObj).replace(/'/g, "\\'");+'\'></div>'; // Later var dataObj = $('div').data('dataObj'); // jQuery automatically unescape it
存储序列化数据的许多问题可以通过将序列化的string转换为base64来解决。 一个base64string可以在任何地方被接受，不用大惊小怪。 看一眼：
atob() btoa()
根据需要转换。
这是如何为我工作。
要在HTML数据属性中保存JSON，请使用“encodeURIComponent（）”方法对其进行编码。
在读取数据的同时，用“decodeURIComponent（）”方法解码，并将stringparsing为JSON对象。
例：
var my_object ={"Super Hero":["Iron Man", "Super Man"]};
保存数据：
var data_str = encodeURIComponent(JSON.stringify(my_object)); $("div#mydiv").attr("data-hero",data-str);
读取数据：
var data_str = $("div#mydiv").attr("data-hero"); var my_object = JSON.parse(decodeURIComponent(data_str));
使用logging的jQuery .data（obj）语法允许您在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" }
出于某种原因，只有在页面上使用一次才能接受我的答案，但在我的情况下，我试图将数据保存在页面上的许多元素上，除了第一个元素之外，所有数据都以某种方式丢失。
作为一种select，我最终把数据写出来并在需要的时候parsing出来。 也许效率不高，但是为我的目的运作良好，因为我真的是原型数据，而不是为生产写这个。
要保存我使用的数据：
$('#myElement').attr('data-key', JSON.stringify(jsonObject));
然后读回数据与接受的答案一样，即：
var getBackMyJSON = $('#myElement').data('key');
这样做也使得数据显示在dom中，如果我用Chrome的debugging器来检查元素。
.data()适用于大多数情况。 我唯一的问题是当JSONstring本身有一个单引号。 我找不到任何简单的方法来解决这个问题，所以采取了这种方法（我使用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>
为了logging，我发现下面的代码工程。 它使您能够从数据标记中检索数组，将新元素推入，并以正确的JSON格式将其存储回数据标记中。 因此，如果需要，可以再次使用相同的代码来向arrays添加更多的元素。 我发现$('#my-data-div').attr('data-namesarray', names_string); 正确地存储数组，但$('#my-data-div').data('namesarray', names_string); 不起作用。
<div id="my-data-div" data-namesarray='[]'></div> var names_array = $('#my-data-div').data('namesarray'); names_array.push("Baz Smith"); var names_string = JSON.stringify(names_array); $('#my-data-div').attr('data-namesarray', names_string);
