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

Question

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

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

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

笔记

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

我似乎永远无法将数据检索为真正的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 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 数据属性包含在标记本身中，那么您只能使用字符串。

Answer 4

为了记录，它对我来说不适用于编码实体，但似乎为了被解析为对象，数据属性必须是格式良好的 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);