如何将 javascript Array 存储在 HTML5 data 属性中？
我已经尝试了JSON.stringifycation 和转义字符的所有变体。
存储数组并再次检索它的精确方法是什么？
注意
我使用[ $("#firstSelectedElement").val(), $("#secondSelectedElement").val() ] 构建数组。我用$("#storageElement").data('storeit') 检索id="storageElement" data-storeIt="stuff"。
我似乎永远无法将数据检索为真正的Array，只能检索到Array 的字符。
【问题讨论】：
标签： javascript jquery arrays parsing html5-data
原来你可以使用元素data属性中的html转义字符来获得类似json的数组（编码为引号）：
<div id="demo" data-stuff='["some", "string", "here"]'></div>
然后在 javascript 中得到它而无需任何额外的魔法：
var ar = $('#demo').data('stuff');
检查这个fiddle。
已编辑（2017 年）
您不需要在data 属性中使用 html 转义字符。
<div id="demo" data-stuff='["some", "string", "here"]'></div>
签出这个新的fiddle。
【讨论】：
data-stuff="['some', 'string', 'here']"（注意'），任何指导将不胜感激。
这取决于您在数组中存储的数据类型。如果它只是字符串（看起来是这样）并且你有一个你知道永远不会成为你的数据的一部分的字符（就像我下面示例中的逗号）那么我会忘记 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 语法要求我们在其数据中的字符串周围使用引号。
【讨论】：
%button{data: {ids: ['a','b','c']} } => <button data-ids='["a","b","c"]'>
data-storeIt='["hello","world"]' 有效但data-storeIt="['hello','world']" 无效吗？
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 数据属性包含在标记本身中，那么您只能使用字符串。
【讨论】：
作为记录，它不适用于我的编码实体，但似乎为了被解析为对象，数据属性必须是格式良好的 JSON 对象。。 p>
所以我能够使用以下对象：
data-myarray="{"key": "value"}"
或者只使用单引号：
data-myobject='{"key1": "value1", "key2": value2}'
是时候玩得开心了！ :D
【讨论】：
您可以像这样将任何对象存储到节点中：
$('#storageElement').data('my-array', ['a', 'b', 'c']);
var myArray = $('#storageElement').data('my-array');
【讨论】：
如果您需要嵌套数组或只是另一种方法。这有效：
$('[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>【讨论】：
JSON.parse 效率更高）
如果在 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="["A","C","E"]"></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);
【讨论】：