Question

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

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

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

注意

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

我似乎永远无法将数据检索为真Array，只检索Array个字符。

Answer 1

事实证明，您可以使用元素data属性中的html转义字符来生成类似json的数组（编码为引号）：

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

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

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

检查此fiddle。

已编辑（2017）
您无需在data属性中使用html转义字符。

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

检查这个新的fiddle。

Answer 2

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

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

然后检索：

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

它比使用JSON处理得更好。它使用的字符更少，而且比“{1}}”更“昂贵”。

但是，如果必须，您的JSON实现将如下所示：

JSON.parse

并检索：

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

请注意，在此示例中，我们必须在var storedArray = JSON.parse($("#storageElement").data("storeIt"));属性周围使用半引号（'）。这是因为JSON语法要求我们在其数据中使用字符串周围的引号。

Answer 3

HTML5数据属性只能存储字符串，因此如果要存储数组，则需要对其进行序列化。 JSON会起作用，看起来你正走在正确的道路上。检索序列化数据后，您只需使用JSON.parse()：

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

回顾api documentation，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');

Answer 6

如果您需要嵌套数组或执行此操作的另一种方法。这有效：

$('[data-example]').each(function (i, e) {
    var json = $(e).data('example');
  for(var index in json){
    console.log(json[index]["name"] + "=" + json[index]["value"]);
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-example='[{"name": "A", "value": 1}, {"name": "B", "value": 2}]' />
<div data-example='[{"name": "C", "value": 3}, {"name": "D", "value": 4}]' />

根据Ulysse BN

的建议

或者使用Bonifacius Sarumpaet指出的eval（）是危险的解决方案，但是可以

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-example="[['A', 1], ['B', 2]]" />
<div data-example="[['C', 3], ['D', 4]]" />

<script>
  $('[data-example]').each(function (i, e) {
    var arrayFromText = eval($(e).data('example'));
    console.log(arrayFromText[0][0] + "=" + arrayFromText[0][1]);
    console.log(arrayFromText[1][0] + "=" + arrayFromText[1][1]);
  });
</script>

Answer 7

如果使用PHP，请在PHP中执行

$arr_test = ['A','C','E'];
$coded = json_encode($arr_test);
// paste coded in data-atribute
print '<div class="funPlus" data-arr_diensten="'. $coded . '"></div>';

inspect上的HTML看起来像：

<div class="funPlus" data-arr_diensten="[&quot;A&quot;,&quot;C&quot;,&quot;E&quot;]"></div>

现在在javascript中检索数组，但是如果它只有一个值，它将作为字符串返回。因此，您必须测试并解决此问题。如果是字符串，我们必须删除多余的引号。 $（this）必须指向对象。

var arr_diensten = $(this).data("arr_diensten");
if (typeof arr_diensten == "string") arr_diensten = [arr_diensten.slice(1, -1)];
console.log(arr_diensten);

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

7 个答案: