在 DOM 中儲存資料意味著以純文字格式儲存資料。例如，我們在使用 React 或任何其他反應式框架時將資料儲存在狀態變數中。當使用者更新輸入欄位中的資料時，它將更新的資料儲存在狀態變數中。
因此，我們在提交表單之前將資料儲存在狀態變數中。提交表單時，我們使用狀態變數的值。
在普通 JavaScript 中，我們可以做同樣的事情，例如以純文字格式儲存數據，每當我們需要提交表單時，我們可以從 DOM 獲取數據，而不是從輸入欄位獲取數據。
在這裡，我們將學習使用 JavaScript 和 Jquery 在 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 在 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 中，使用者需要將所有資料儲存在單一或多個物件中。
以上是如何將資料儲存到 DOM 中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
