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

Question

javascript 如何Array存储在 HTML5data属性中？

我已经尝试了JSON.stringify阳离子和转义字符的所有变体。

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

笔记

我用[ $("#firstSelectedElement").val(), $("#secondSelectedElement").val() ]. 我id="storageElement" data-storeIt="stuff"用$("#storageElement").data('storeit').

我似乎永远无法将数据检索为 true 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');

检查这个小提琴。

已编辑（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 数据属性只能存储字符串，因此如果要存储数组，则需要对其进行序列化。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

作为记录，它不适用于我的编码实体，但似乎为了被解析为对象， data 属性必须是格式良好的 JSON object。

所以我能够使用一个对象：

data-myarray="{"key": "value"}"

或者只使用单引号：

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所建议的那样

或者使用 eval() 这是Bonifacius Sarumpaet指出的危险解决方案，但有效

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

检查的 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);