在 DOM 中存儲數(shù)據(jù)意味著以純文本格式存儲數(shù)據(jù)。例如，我們在使用 React 或任何其他反應(yīng)式框架時將數(shù)據(jù)存儲在狀態(tài)變量中。當(dāng)用戶更新輸入字段中的數(shù)據(jù)時，它將更新的數(shù)據(jù)存儲在狀態(tài)變量中。
因此，我們在提交表單之前將數(shù)據(jù)存儲在狀態(tài)變量中。提交表單時，我們使用狀態(tài)變量的值。
在普通 JavaScript 中，我們可以做同樣的事情，比如以純文本格式存儲數(shù)據(jù)，每當(dāng)我們需要提交表單時，我們可以從 DOM 獲取數(shù)據(jù)，而不是從輸入字段獲取數(shù)據(jù)。
在這里，我們將學(xué)習(xí)使用 JavaScript 和 Jquery 在 DOM 中存儲數(shù)據(jù)。
使用 JavaScript 在 DOM 中存儲數(shù)據(jù)
在 JavaScript 中，我們可以創(chuàng)建一個對象來存儲數(shù)據(jù)。我們可以將數(shù)據(jù)以純文本格式存儲在對象中，并在需要時從對象中獲取。
語法
用戶可以按照以下語法使用 JavaScript 將數(shù)據(jù)存儲在 DOM 中。
let data_obj = {
prop1: "",
}
data_obj.prop1 = value;
登錄后復(fù)制
在上面的語法中，我們創(chuàng)建了 data_obj 對象來存儲數(shù)據(jù)，并且我們可以更新它的值。
示例
在下面的示例中，我們創(chuàng)建了包含兩個輸入字段的表單。此外，我們還為每個輸入字段指定了名稱。每當(dāng)用戶單擊存儲數(shù)據(jù)函數(shù)時，它都會調(diào)用 storeInDOM() 函數(shù)，該函數(shù)獲取輸入值并將其存儲在對象中。每當(dāng)用戶按下“獲取存儲的數(shù)據(jù)”按鈕時，它就會調(diào)用 getFromDOM() 函數(shù)，該函數(shù)從 data_obj 對象訪問數(shù)據(jù)。
<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>
登錄后復(fù)制
在輸出中，用戶可以看到存儲的數(shù)據(jù)。
使用 jQuery 在 DOM 中存儲數(shù)據(jù)
jQuery 包含數(shù)據(jù) API，我們可以使用 data() 方法調(diào)用它。我們可以存儲特定元素的數(shù)據(jù)。當(dāng)我們將兩個參數(shù)傳遞給數(shù)據(jù) API 時，它會存儲特定元素的數(shù)據(jù)；否則，它返回為特定元素存儲的數(shù)據(jù)。
語法
用戶可以按照以下語法使用 Jquery 的 data() 方法將數(shù)據(jù)存儲在 DOM 中。
$("CSS_identifier ").data("key_name", value);
登錄后復(fù)制
CSS 標(biāo)識符用于選擇上述語法中的元素。 data() 方法將鍵作為第一個參數(shù)，將相關(guān)值作為第二個參數(shù)。
示例
該表單包含以下示例中的電子郵件和密碼輸入字段。每當(dāng)用戶按下按鈕來存儲數(shù)據(jù)時，我們都會使用 Jquery 獲取輸入的值，并使用 data() 方法將其存儲在特定元素的 DOM 中。這里， $(“#email”).data(“email”, email) 將訪問 id 等于 email 的輸入，并將 ’email’ 存儲為鍵，將輸入值存儲為 ’email’ 鍵的值。
因此，我們可以使用data()方法以任意元素作為引用來存儲鍵值對，并且用戶在訪問數(shù)據(jù)時也需要以相同的元素作為引用。
<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>
登錄后復(fù)制
用戶學(xué)會了在 DOM 中存儲數(shù)據(jù)。然而，將數(shù)據(jù)存儲在 DOM 中是一種不好的做法，因為它是臨時的。用戶可以使用瀏覽器的本地或會話存儲來存儲數(shù)據(jù)，語法也很簡單。
在 JQuery 中，用戶可以使用數(shù)據(jù) API 存儲特定元素的數(shù)據(jù)。在 JavaScript 中，用戶需要將所有數(shù)據(jù)存儲在單個或多個對象中。
以上就是如何將數(shù)據(jù)存儲到 DOM 中？的詳細內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
