将JSON对象存储在HTML jQuery中的data属性中

Question

我正在使用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标记中存储实际对象的任何想法？

Answer 1

实际上,你的最后一个例子:

<div data-foobar='{"foo":"bar"}'></div>

似乎运作良好(见http://jsfiddle.net/GlauberRocha/Q6kKU/).

好处是data-属性中的字符串会自动转换为JavaScript对象.相反,我认为这种方法没有任何缺点!一个属性足以存储整个数据集,可以通过对象属性在JavaScript中使用.

(注意:对于自动赋予Object类型而不是String类型的数据属性,您必须小心编写有效的JSON,特别是将键名括在双引号中).

Answer 2

而不是将其嵌入文本中使用 $('#myElement').data('key',jsonObject);

它实际上不会存储在html中,但是如果你使用的是jquery.data,那么所有这些都是抽象的.

要获取JSON,请不要解析它,只需调用:

var getBackMyJSON = $('#myElement').data('key');

如果您要获取[Object Object]而不是直接JSON,只需通过数据键访问您的JSON:

var getBackMyJSON = $('#myElement').data('key').key;

Answer 3

这就是它对我有用的方式.

宾语

var my_object ={"Super Hero":["Iron Man", "Super Man"]};

组

使用encodeURIComponent()对字符串化对象进行编码并设置为属性:

var data_str = encodeURIComponent(JSON.stringify(my_object));
$("div#mydiv").attr("data-hero",data-str);

得到

要将值作为对象获取,请使用decodeURIComponent()属性值解析已解码的值:

var data_str = $("div#mydiv").attr("data-hero");
var my_object = JSON.parse(decodeURIComponent(data_str));

Answer 4

对我来说,它的工作方式就像那样,因为我需要将它存储在模板中 ......

// Generate HTML
var gridHtml = '<div data-dataObj=\''+JSON.stringify(dataObj).replace(/'/g, "\\'");+'\'></div>';

// Later
var dataObj = $('div').data('dataObj'); // jQuery automatically unescape it

Answer 5

将window.btoaandwindow.atob与 JSON.stringifyand结合使用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"] 
}

Answer 6

存储序列化数据的许多问题可以通过将序列化字符串转换为base64来解决.

可以在几乎任何地方接受base64字符串而不用担心.

看一眼:

• BTOA()

该WindowOrWorkerGlobalScope.btoa()方法从String对象创建base-64编码的ASCII字符串,其中字符串中的每个字符都被视为二进制数据的字节.

• ATOB()

该WindowOrWorkerGlobalScope.atob()函数解码使用base-64编码编码的数据字符串.

根据需要转换为/从.

Answer 7

有一种在 HTML 中存储 JSON 的更好方法：

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);