如何将数据存储到 DOM 中？

在 Web 开发中，DOM (Document Object Model) 是一个非常常用的概念，它是 HTML 文档的对象表示形式。在 JavaScript 中处理 DOM，你可以方便地操作和修改你的网页。

同时，将数据存储到 DOM 中也是非常常见的操作。比如，当你需要缓存一些数据时，或者当你需要在不同的页面之间传递一些信息时，你可以将数据以某种形式嵌入到 DOM 中，然后在需要时解析回来。

接下来，我们将介绍如何将数据存储到 DOM 中。

使用 data-* 属性

最常见的一种方式是使用 HTML5 引入的 "data-" 属性。在 HTML 元素中，你可以使用 "data-" 属性来存储任何字符串型数据。

<!-- 在 div 元素中存储一个字符串 -->
<div id="myDiv" data-my-data="Hello, World!"></div>

<!-- 在 a 元素中存储一个数字 -->
<a href="/some-link" data-my-number="123"></a>

要从 DOM 中读取此类数据，你可以使用元素的 "dataset" 属性：

const myDiv = document.getElementById('myDiv');
console.log(myDiv.dataset.myData); // 输出 "Hello, World!"

使用自定义属性

除了 "data-" 属性，你还可以使用自定义属性来存储数据。使用自定义属性的方式与 "data-" 属性非常相似。

<!-- 在 div 元素中存储一个字符串 -->
<div id="myDiv" my-data="Hello, World!"></div>

<!-- 在 a 元素中存储一个数字 -->
<a href="/some-link" my-number="123"></a>

从代码中读取数据的代码与 "data-*" 属性类似：

const myDiv = document.getElementById('myDiv');
console.log(myDiv.getAttribute('my-data')); // 输出 "Hello, World!"

注意，使用自定义属性的方式不如使用 "data-" 属性来得标准化，因此我们一般建议使用 "data-" 属性来存储数据。

在 DOM 中创建隐藏的元素

如果你需要存储更复杂的数据类型，例如 JavaScript 对象或数组，你可以在 DOM 中创建隐藏的元素，然后将数据保存在其中。这个隐藏的元素可以是任何元素，只需将其隐藏即可。

<!-- 在页面中创建一个隐藏的 div 元素 -->
<div id="myData" style="display: none;"></div>

然后，你可以使用 JavaScript 来修改这个元素的 innerHTML 属性来存储数据。这种方式非常灵活，因为你可以使用任何格式的数据。

const myData = { name: 'John', age: 18 };
const myDataElement = document.getElementById('myData');
myDataElement.innerHTML = JSON.stringify(myData);

要获取该元素中的数据，你可以使用 innerHTML 属性：

const myDataElement = document.getElementById('myData');
const myDataString = myDataElement.innerHTML;
const myData = JSON.parse(myDataString);
console.log(myData); // 输出 { name: 'John', age: 18 }

使用 cookies

最后，你还可以使用 cookies 来存储数据。cookies 是一种在浏览器和服务器之间传递数据的方式。可以将 cookies 视为存储在客户端的某种类似于键值对的数据。

以下是将数据保存到 cookies 中的基本代码:

document.cookie = "myData=Hello, World!";

要获取 cookies 中的数据，你可以使用以下代码：

function getCookie(name) {
  const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
  if (match) {
    return match[2];
  }
}

const myData = getCookie('myData');
console.log(myData); // 输出 "Hello, World!"

总结

现在你已经知道了如何将数据存储到 DOM 中了。你可以使用 "data-*" 属性、自定义属性、隐藏的元素或 cookies 来实现它。选择哪种方式完全取决于你需要存储哪种类型的数据以及你的个人偏好。