HTML5引入了许多新特性，其中一个非常有用的功能是数据属性（data attributes）。使用数据属性，可以在HTML元素中存储自定义数据，这些数据可以被JavaScript读取并操作。在本文中，我们将学习如何使用HTML5数据属性来存储和检索JavaScript数组。
存储数组
要将JavaScript数组存储在HTML元素中，只需将数组转换为字符串，并将其赋值给数据属性即可。以下代码演示如何将名为myArray的数组存储在具有id="myElement"的HTML元素中：
<div id="myElement" data-array="[1,2,3,4]"></div>
请注意，将数组转换为字符串时，必须使用JSON.stringify()方法。如果直接将数组赋值给数据属性，它将被解释为仅包含第一个元素的字符串。
如果您需要动态地将数组存储在HTML元素中，则可以使用JavaScript编程方式。以下代码演示如何使用jQuery将名为myArray的数组存储在具有id="myElement"的HTML元素中：
var myArray = [1, 2, 3, 4];
$("#myElement").data("array", myArray);检索数组
要从HTML元素中检索JavaScript数组，请使用相应的数据属性名称和jQuery的.data()方法。以下代码演示如何检索名为myElement的HTML元素中的数组：
var myArray = $("#myElement").data("array");如果您没有使用jQuery，可以使用HTML5原生方法以编程方式检索数据属性。例如，以下代码演示如何从名为myElement的HTML元素中检索数据属性为array的值：
var myElement = document.getElementById("myElement");
var myArray = JSON.parse(myElement.getAttribute("data-array"));示例代码
以下是一个完整的示例代码，展示了如何在HTML元素中存储和检索JavaScript数组。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ --- -------- ------ -- ----- ---- ------------------
------- -----------------------------------------------------------
------- -----------------------
---------------------------- -
-- ----
--- ------- - --- -- -- ---
----------------------------- ---------
-- ----
--- -------------- - ------------------------------
--------------------------------------------------
---
---------
-------
------
---- ---------------------
---- ------------------
-------
-------上面的代码将输出以下文本：[1,2,3,4]。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26533