在前端开发中，我们通常使用 HTML 来描述页面的结构和内容，但是有时候我们需要在标记中存储一些自定义的数据。这些数据可能包括用户配置、状态信息或其他与页面相关的数据。本文将介绍如何在 HTML 中存储任意数据。
使用自定义属性
HTML 标记可以包含自定义属性，这些属性可以用于存储任意数据。例如，我们可以创建一个自定义属性来存储用户 ID：
<div class="user" data-user-id="123">John Doe</div>
在上面的示例中，我们使用了 data-user-id 自定义属性来存储用户 ID。注意，我们使用了 data- 前缀来遵循 HTML5 规范。
要在 JavaScript 中访问这个自定义属性，我们可以使用 dataset 属性。例如，下面的代码将输出用户 ID：
const userElement = document.querySelector('.user');
const userId = userElement.dataset.userId;
console.log(userId); // 输出 "123"通过使用 dataset 属性，我们可以轻松地读取和写入自定义属性，而不需要解析 HTML 标记。
使用类名
除了自定义属性之外，我们还可以使用类名来存储数据。例如，我们可以为元素添加一个类名，该类名包含所需的数据：
<div class="user-123">John Doe</div>
在上面的示例中，我们使用了 user-123 类名来存储用户 ID。要在 JavaScript 中访问这个类名，我们可以使用正则表达式或字符串分割等技术来提取所需的数据。
const userElement = document.querySelector('.user-123');
const userId = userElement.className.match(/user-(\d+)/)[1];
console.log(userId); // 输出 "123"虽然使用类名存储数据是一种有效的方法，但它可能会导致 CSS 样式和 JavaScript 逻辑之间的混淆。因此，我们建议仅将类名用于样式控制，并使用自定义属性来存储数据。
使用隐藏元素
最后，我们还可以使用隐藏元素来存储数据。例如，我们可以创建一个 data 元素并将其隐藏，以便存储任意数据：
<data id="my-data">{"key": "value"}</data>在上面的示例中，我们创建了一个 data 元素，并将 JSON 数据存储在其中。在 JavaScript 中，我们可以使用以下代码访问该数据：
const myDataElement = document.getElementById('my-data');
const myData = JSON.parse(myDataElement.textContent);
console.log(myData.key); // 输出 "value"使用隐藏元素的好处是，它可以帮助我们将数据从页面结构中隔离出来。但是，请注意避免滥用隐藏元素。如果您需要在页面中存储大量数据，请考虑使用 Ajax 请求或其他更高级的技术。
结论
通过本文，我们已经学习了如何在 HTML 中存储任意数据。我们可以使用自定义属性、类名或隐藏元素来实现这一点。选择哪种方法取决于您的具体需求和个人喜好。无论您选择哪种方法，确保遵守 HTML5 规范，并尽量避免滥用这些技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8524
