极客笔记JavaScript 如何将数据存储到DOM中
将数据存储到DOM中意味着以纯文本格式存储数据。例如，在使用React或任何其他反应性框架时，我们将数据存储在状态变量中。当用户更新输入字段中的数据时，它将更新后的数据存储在状态变量中。
所以，在提交表单之前我们会在状态变量中存储数据。在提交表单时，我们使用状态变量的值。
在原生JavaScript中，可以做同样的事情，比如以纯文本格式存储数据，并且每当需要提交表单时，我们可以从DOM中获取数据而不是从输入字段中获取。
这里，我们将学习如何使用JavaScript和Jquery将数据存储在DOM中。
使用JavaScript将数据存储在DOM中
在JavaScript中，我们可以创建一个对象来存储数据。我们可以以纯文本格式将数据存储在对象中，并在需要的时候从对象中获取。
语法
用户可以按照以下语法使用JavaScript将数据存储在DOM中。
let data_obj = {
prop1: "",
}
data_obj.prop1 = value;
在上面的语法中，我们创建了data_obj对象来存储数据，并且可以更新其值。
示例
在下面的示例中，我们创建了包含两个输入字段的表单。我们为每个输入字段赋予了名称。每当用户点击store data函数时，它调用storeInDOM()函数，该函数获取输入值并将其存储在对象中。每当用户按下’get stored data’按钮时，它调用getFromDOM()函数，该函数从data_obj对象中访问数据。
<html>
<body>
<h2>Using JavaScript to store data in DOM</h2>
<form>
<label for = "fname"> First name: </label> <br>
<input type = "text" id = "fname" name = "fname"> <br>
<label for = "lname"> Last name: </label> <br>
<input type = "text" id = "lname" name = "lname">
</form>
<button onclick = "storeInDOM()"> Store data </button>
<button onclick = "getFromDOM()"> get stored data </button>
<div id = "content"> </div>
<script>
let data_obj = {
fname: "",
lname: ""
}
function storeInDOM() {
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
data_obj.fname = fname;
data_obj.lname = lname;
}
function getFromDOM() {
document.getElementById("content").innerHTML = "The value of first name is - " + data_obj.fname + " <br> The value of the second name is - " + data_obj.lname;
}
</script>
</body>
</html>
##
在输出中，用户可以看到存储的数据。
使用jQuery在DOM中存储数据
jQuery包含数据API，我们可以使用data()方法来调用。我们可以为特定元素存储数据。当我们向数据API传递两个参数时，它会为特定元素存储数据；否则，它会返回为特定元素存储的数据。
语法
用户可以按照下面的语法使用Jquery的data()方法将数据存储在DOM中。
$("CSS_identifier ").data("key_name", value);
CSS标识符用于选择上述语法中的元素。 data()方法以键作为第一个参数，以对应的值作为第二个参数。
示例
表单中包含了下面的示例中的电子邮件和密码输入字段。每当用户按下按钮存储数据时，我们使用jQuery获取输入的值，并使用data()方法将其存储在DOM中的特定元素上。在这里，$(“#email”).data(“email”, email)将访问id为email的输入框，并将’email’作为键和输入值作为’email’键的值存储起来。
因此，我们可以使用data()方法将键值对存储在任何元素上，并且在访问数据时用户需要使用相同的元素作为参考。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<h2>Using jQuery to store data in DOM</h2>
<form>
<label for = "Email"> Email: </label> <br>
<input type = "email" id = "email" name = "email"> <br>
<label for = "password"> Password: </label> <br>
<input type = "text" id = "password" name = "password">
</form>
<button onclick = "storeInDOM()"> Store data </button>
<button onclick = "getFromDOM()"> Show stored data </button>
<div id = "content"> </div>
<script>
// storing data in DOM using jQuery's data() method
function storeInDOM() {
var email = ("#email").val();
var password =("#password").val();
("#email").data("email", email);("#password").data("password", password);
}
// getting data from DOM using jQuery's data() method
function getFromDOM() {
var email = ("#email").data("email");
var password =("#password").data("password");
$("#content").html("Email: " + email + " Password: " + password);
}
</script>
</body>
</html>
用户学会了在DOM中存储数据。然而，在DOM中存储数据是一种不好的做法，因为它是临时的。用户可以使用浏览器的本地或会话存储来存储数据，这也具有直观的语法。
在JQuery中，用户可以使用数据API为特定元素存储数据。在JavaScript中，用户需要将所有数据存储在单个或多个对象中。