如何在 DOM 中存储数据？

在前端开发中，我们常常需要在 DOM 中存储和操作数据。DOM 元素自身提供了一些自定义属性（data-*）来存储数据，我们也可以使用 JavaScript 的全局变量或闭包等方式来存储数据。下面就来详细介绍一下这些方式。

使用自定义属性（data-*）

自定义属性是专门为了存储数据而设计的，我们可以通过 getAttribute 和 setAttribute 方法来读写自定义属性的值。以 data- 开头的自定义属性有更好的语义化，有助于我们理解代码。

例如我们可以这样在一个 div 元素中存储一些信息：

<div id="myDiv" data-user-id="1234" data-user-name="Tom"></div>

我们可以通过以下代码来获取这些信息：

const myDiv = document.querySelector('#myDiv');

const userId = myDiv.getAttribute('data-user-id');
const userName = myDiv.getAttribute('data-user-name');

当然，也可以通过直接访问元素的 dataset 属性来获取：

const userId = myDiv.dataset.userId;
const userName = myDiv.dataset.userName;

注意，dataset 属性会自动将连字符命名法转换为驼峰式命名，例如：

<div id="myDiv" data-user-age="18"></div>

const userAge = myDiv.dataset.userAge;

使用 JavaScript 全局变量

JavaScript 中的全局变量在整个项目中都能够被访问到，我们可以将一些需要在多个地方访问的数据存储在全局变量中。

例如我们可以这样定义一个全局变量：

window.myData = {
  userId: '1234',
  userName: 'Tom',
};

然后在任何需要使用这些数据的地方都可以直接访问：

const userId = myData.userId;
const userName = myData.userName;

但是需要注意，全局变量可能会产生命名冲突或造成安全问题，因此需要慎重使用。

使用闭包

有些时候我们需要在一个函数执行完成后，仍然能够访问到这个函数内部的数据。这时我们就可以使用闭包来存储数据。

例如，我们可以这样定义一个函数：

function getData() {
  const userId = '1234';
  const userName = 'Tom';
  
  return function() {
    console.log(`userId: ${userId}, userName: ${userName}`);
  }
}

const showData = getData();
showData(); // 输出 "userId: 1234, userName: Tom"

在这个例子中，getData 内部定义了 userId 和 userName 两个变量，并将一个匿名函数作为返回值返回。当 getData 执行完成后，showData 仍然能够访问到 getData 内部的数据。