📅 最后修改于: 2023-12-03 15:25:14.138000 🧑 作者: Mango
在前端开发中，我们经常需要将数据传递到 HTML 中，以便动态地展示数据。有时，我们需要将 JSON 对象存储在 HTML 元素的数据属性中，以便在后续的操作中使用。本文将介绍如何将 JSON 对象存储在 HTML 数据属性中。
HTML5 引入了自定义数据属性，允许我们在 HTML 元素中存储任意的数据。自定义数据属性需要添加前缀 data-，如下所示：
<div data-key="value"></div>
在这个例子中，我们将 value 存储在 data-key 属性中。
在将 JSON 对象存储在 HTML 数据属性中之前，我们需要将其转换为字符串。JSON 对象可以使用 JavaScript 内置的 JSON.stringify() 方法快速转换为字符串。例如：
const data = {name: 'Alice', age: 25};
const jsonStr = JSON.stringify(data);
console.log(jsonStr);
// 输出：{"name":"Alice","age":25}
现在，我们可以将字符串形式的 JSON 对象存储在 HTML 数据属性中了。我们使用 JavaScript DOM API 获取要存储数据的 HTML 元素，然后使用 .dataset 属性设置数据。例如：
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="myDiv" data-json=''></div>
<script>
const data = {name: 'Alice', age: 25};
const jsonStr = JSON.stringify(data);
const myDiv = document.getElementById('myDiv');
myDiv.dataset.json = jsonStr;
console.log(myDiv.dataset.json);
// 输出：{"name":"Alice","age":25}
</script>
</body>
</html>
在这个例子中，我们将 JSON 对象 {name: 'Alice', age: 25} 存储在 data-json 属性中。我们使用 JavaScript DOM API 获取 #myDiv 元素，并设置 dataset.json 属性为 JSON 字符串。最后，我们使用 console.log() 输出存储在 data-json 属性中的 JSON 字符串。
当我们需要读取存储在 HTML 数据属性中的 JSON 对象时，我们使用 JavaScript DOM API 的 .dataset 属性获取存储的字符串，并使用 JSON.parse() 方法将其解析为 JSON 对象。例如：
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="myDiv" data-json='{"name":"Alice","age":25}'></div>
<script>
const myDiv = document.getElementById('myDiv');
const jsonStr = myDiv.dataset.json;
const data = JSON.parse(jsonStr);
console.log(data);
// 输出：{name: "Alice", age: 25}
</script>
</body>
</html>
在这个例子中，我们使用 #myDiv 元素的 dataset.json 属性获取存储的 JSON 字符串 {"name":"Alice","age":25}。使用 JSON.parse() 将字符串解析为 JSON 对象，并将其存储在 data 变量中。最后，我们使用 console.log() 输出存储在 data 中的 JSON 对象。
本文介绍了如何将 JSON 对象存储在 HTML 数据属性中，并演示了如何读取存储的 JSON 对象。通过使用自定义数据属性，我们可以在 HTML 元素中轻松地存储和读取任意数据。