在 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 在 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 中？的詳細內容，更多請關注www.92cms.cn其它相關文章！
