数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何将数据存储到DOM？
将数据存储在DOM中意味着以纯文本格式存储数据。例如，在使用React或其他任何反应式框架时，我们将数据存储在状态变量中。当用户更新输入字段中的数据时，它会将更新后的数据存储在状态变量中。
因此，我们在提交表单之前将数据存储在状态变量中。在提交表单时，我们使用状态变量的值。
在原生JavaScript中，我们可以做同样的事情，例如以纯文本格式存储数据，并且每当我们需要提交表单时，我们可以从DOM中获取数据，而不是从输入字段中获取数据。
在这里，我们将学习如何使用JavaScript和Jquery将数据存储到DOM中。
使用JavaScript将数据存储到DOM
在JavaScript中，我们可以创建一个对象来存储数据。我们可以以纯文本格式将数据存储在对象中，并在需要时从对象中获取数据。
语法
用户可以按照以下语法使用JavaScript将数据存储到DOM中。
let data_obj = {
prop1: "",
}
data_obj.prop1 = value;
在上面的语法中，我们创建了data_obj对象来存储数据，我们可以更新其值。
示例
在下面的示例中，我们创建了一个包含两个输入字段的表单。我们还为每个输入字段命名。每当用户点击“存储数据”函数时，它都会调用storeInDOM()函数，该函数获取输入值并将其存储在对象中。每当用户按下“获取已存储数据”按钮时，它都会调用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包含data API，我们可以使用data()方法调用它。我们可以为特定元素存储数据。当我们向data API传递两个参数时，它会为特定元素存储数据；否则，它将返回为特定元素存储的数据。
语法
用户可以按照以下语法使用Jquery的data()方法将数据存储到DOM中。
$("CSS_identifier ").data("key_name", value);
在上面的语法中，使用CSS标识符来选择元素。data()方法将键作为第一个参数，将相应的值作为第二个参数。
示例
下面的示例中，表单包含电子邮件和密码输入字段。每当用户按下存储数据的按钮时，我们使用Jquery获取输入的值，并使用data()方法将其存储在特定元素的DOM中。这里，$("#email").data("email", email)将访问id等于email的输入，并将“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中，用户可以使用data API为特定元素存储数据。在JavaScript中，用户需要将所有数据存储在一个或多个对象中。
2K+ 次浏览
