資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
