存储和检索JavaScript数组中和从HTML5数据属性(store and retrieve j

2019-09-01 04:31发布

怎么能一个JavaScript Array存储在一个HTML5 data属性?

我试过的每一个变化JSON.stringify阳离子和转义字符。

什么是存储阵列,并再次检索它的精确方法?

注意

我建立与阵列[ $("#firstSelectedElement").val(), $("#secondSelectedElement").val() ] 。 我找回id="storageElement" data-storeIt="stuff"$("#storageElement").data('storeit')

我似乎从来没有检索数据作为一个真正的Array ,只有一个Array的字符。

Answer 1:

原来,你可以使用HTML元素中的转义字符data的属性有JSON状阵列(编码有引号):

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

然后在JavaScript得到它无需任何额外的魔法:

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

检查此捣鼓出来。

编辑(2017年)
你不需要在使用HTML转义字符data属性。

<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的数据属性只能存储字符串,所以如果你想存储阵列,您将需要序列化。 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数据属性,那么仅限于字符串。



Answer 4:

为了记录在案,它并没有与我的编码实体的工作,但似乎是为了被解析为一个对象,数据属性必须是一个结构良好的JSON对象

所以,我能够使用一个对象有:

data-myarray="{&quot;key&quot;: &quot;value&quot;}"

或者只是使用单引号:

data-myobject='{"key1": "value1", "key2": value2}'

时间有乐趣! :d



Answer 5:

您可以将任何对象存储到这样的节点:

$('#storageElement').data('my-array', ['a', 'b', 'c']);

var myArray = $('#storageElement').data('my-array');


文章来源: store and retrieve javascript arrays into and from HTML5 data attributes