在HTML5数据属性中存储和检索javascript数组

Question

如何将javascript Array存储在HTML5 data属性中？

我尝试了JSON.stringify阳离子和逃避角色的每一种变化.

存储数组并再次检索它的精确方法是什么？

注意

我用它构建数组[ $("#firstSelectedElement").val(), $("#secondSelectedElement").val() ].我检索id="storageElement" data-storeIt="stuff"用$("#storageElement").data('storeit').

我似乎永远不会将数据检索为真实的Array,只有一个Array字符.

Answer 1

事实证明,您可以使用element data属性中的html转义字符来生成类似json的数组(编码为引号):

<div id="demo" data-stuff='[&#34;some&#34;, &#34;string&#34;, &#34;here&#34;]'></div>

然后在javascript中获取它没有任何额外的魔法:

var ar = $('#demo').data('stuff');

检查这个小提琴.

已编辑(2017)
您无需在data属性中使用html转义字符.

<div id="demo" data-stuff='["some", "string", "here"]'></div>

检查这个新的小提琴.

Answer 2

这取决于您在阵列中存储的数据类型.如果它只是字符串(看起来像是)并且你有一个你知道的字符永远不会成为数据的一部分(比如我下面的例子中的逗号)那么我会忘记JSON序列化并只使用string.split:

<div id="storageElement" data-storeIt="stuff,more stuff"></div>

然后在检索时:

var storedArray = $("#storageElement").data("storeIt").split(",");

它将比使用JSON处理得更好.它使用较少的字符,并且不如"昂贵" JSON.parse.

但是,如果必须,您的JSON实现将如下所示:

<div id="storageElement" data-storeIt='["hello","world"]'></div>

并检索:

var storedArray = JSON.parse($("#storageElement").data("storeIt"));

请注意,在此示例中,我们必须'在data-storeIt属性周围使用半引号().这是因为JSON语法要求我们在其数据中使用字符串周围的引号.

Answer 3

HTML5 data 属性只能存储字符串，所以如果你想存储一个数组，你需要序列化它。JSON 会起作用，看起来您走在正确的道路上。您只需要在JSON.parse()检索序列化数据后使用：

var retrieved_string = $("#storageElement").data('storeit');
var retrieved_array = JSON.parse(retrieved_string);

查看api 文档，jQuery 应该尝试自动转换 JSON 编码的字符串，前提是它编码正确。你能举一个你存储的价值的例子吗？

还要注意 HTML5 数据属性和 jQuery.data()方法是两个不同的东西。它们相互作用，但 jQuery 更强大，可以存储任何数据类型。您可以直接使用 jQuery 存储一个 javascript 数组，而无需对其进行序列化。但是，如果您需要将它作为 HTML5 数据属性包含在标记本身中，那么您只能使用字符串。