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

如何将javascript

数组

存储在HTML5

数据

属性中

我尝试了JSON.stringify的每一种变体，包括阳离子和转义字符

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

注意

我使用

[$（“#firstSelectedElement”）.val（），$（“#secondSelectedElement”）.val（）]构建数组。我使用
$（“#storageElement”）.data（'storeIt'）
检索
id=“storageElement”data storeIt=“stuff”

我似乎永远无法将数据检索为真正的
数组
，只有
数组
。
HTML5数据属性只能存储字符串，因此如果要存储数组，则需要将其序列化。JSON会起作用，看起来你走的是正确的道路。检索序列化数据后，只需使用
JSON.parse（）
：

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

回顾下，jQuery应该尝试自动转换JSON编码的字符串，只要它编码正确。你能举一个你所储存的价值的例子吗

还要注意，HTML5数据属性和jQuery
.data（）
方法是两个截然不同的东西。它们相互作用，但jQuery更强大，可以存储任何数据类型。您可以直接使用jQuery存储javascript数组，而无需序列化它。但是，如果需要将其作为HTML5数据属性保存在标记本身中，则仅限于字符串。
这取决于存储在数组中的数据类型。如果只是字符串（看起来是这样），并且您知道某个字符永远不会成为数据的一部分（如下面示例中的逗号），那么我将忘记JSON序列化，而只使用string.split：

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

它的处理能力比使用JSON要好一点。它使用更少的字符，比
JSON.parse
更“便宜”

但是，如果必须这样做，JSON实现将如下所示：

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

请注意，在本例中，我们必须在
数据存储it
属性周围使用半引号（
”
）。这是因为JSON语法要求我们在其数据中的字符串周围使用引号。
您可以像这样将任何对象存储到节点中：

$('#storageElement').data('my-array', ['a', 'b', 'c']);

var myArray = $('#storageElement').data('my-array');

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

看看这个

编辑（2017）

您不需要在
数据
属性中使用html转义字符

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



检查一下这个新记录。
对于记录，它对我来说不适用于编码实体，但似乎为了被解析为对象，数据属性必须是格式良好的JSON对象

因此，我能够使用一个对象：

data-myarray="{&quot;key&quot;: &quot;value&quot;}"

或者只使用单引号：

data-myobject='{"key1": "value1", "key2": value2}'

是时候玩乐了！：D
如果在PHP中使用PHP do：

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

如果您需要嵌套数组或其他方法。这项工作：


$（“[数据示例]”）。每个（函数（即）{
var json=$（e）.data（'example'）；
for（json中的var索引）{
log（json[index][“name”]+“=”+json[index][“value”]）；
}
});

LOL。我讨厌这种情况发生。我猜一个微不足道的回答会让你说“嘘！”总比根本没有解决方案好@我刚注意到你说你用了我的建议，但没有把它作为答案。对Rails的人来说：这里提到的JSON版本是HAML如何处理数组设置的，例如：
%button{data:{id:['a'、'b'、'c']}
=>
@Grinn你知道为什么
数据仓库it='['hello'，'world']
可以工作，但
数据仓库it=“['hello'，'world']
doesnt？值得注意的是@Raff建议的解决方案使用了IE…map（函数{return s.trim（）}）
从html存储它怎么样？感谢更新，它工作了。但是我不知道为什么它不适用于
data stuff=“['some'、'string'、'here']”
（注意
”
），任何指导都将不胜感激。非常感谢，这很好：“["；some"；"；string"；"；here&"；]”Animesh Singh：您必须使用有效的JSON，单引号不是有效的JSON。@nand42单引号问题就是我遇到的问题。就像一个双引号的魅力！请注意，如果数据中有一项，它将产生（int）或（string）值。我写了一个如何处理这个问题的答案。javascript中的eval（）函数到底是什么？我唯一上网的地方是它执行参数。eval（string）将以代码的形式执行字符串。在这段代码中，它从数据属性中获取字符串并在数组中转换它。您可以在这里阅读有关eval函数的更多信息：我现在明白了。谢谢你的简短解释。但是，从我在网上看到的情况来看，将eval（）放在代码上是危险的，因为它容易被黑客滥用。@BonifaciusSarumpaet你是对的，而且，与其他解决方案相比，在大多数情况下eval的性能真的很差（例如，
JSON.parse
）
<div id="demo" data-stuff='["some", "string", "here"]'></div>

data-myarray="{&quot;key&quot;: &quot;value&quot;}"

data-myobject='{"key1": "value1", "key2": value2}'

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

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

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