怎么能一个JavaScript Array
存储在一个HTML5 data
属性?
我试过的每一个变化JSON.stringify
阳离子和转义字符。
什么是存储阵列,并再次检索它的精确方法?
注意
我建立与阵列[ $("#firstSelectedElement").val(), $("#secondSelectedElement").val() ]
。 我找回id="storageElement" data-storeIt="stuff"
与$("#storageElement").data('storeit')
我似乎从来没有检索数据作为一个真正的Array
,只有一个Array
的字符。
原来,你可以使用HTML元素中的转义字符data
的属性有JSON状阵列(编码有引号):
<div id="demo" data-stuff='["some", "string", "here"]'></div>
然后在JavaScript得到它无需任何额外的魔法:
var ar = $('#demo').data('stuff');
检查此捣鼓出来。
编辑(2017年)
你不需要在使用HTML转义字符data
属性。
<div id="demo" data-stuff='["some", "string", "here"]'></div>
检查这个新的小提琴了。
这取决于你在阵列中存储的数据类型。 如果它只是字符串(因为它似乎),你有,你知道的永远不会是你的数据的一部分(如下面的示例所示的逗号)一个字符,然后我就忘了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的语法要求我们周围使用引号的字符串在其数据。
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数据属性,那么仅限于字符串。
为了记录在案,它并没有与我的编码实体的工作,但似乎是为了被解析为一个对象,数据属性必须是一个结构良好的JSON对象 。
所以,我能够使用一个对象有:
data-myarray="{"key": "value"}"
或者只是使用单引号:
data-myobject='{"key1": "value1", "key2": value2}'
时间有乐趣! :d
您可以将任何对象存储到这样的节点:
$('#storageElement').data('my-array', ['a', 'b', 'c']);
var myArray = $('#storageElement').data('my-array');