如何將資料儲存到 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 在 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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
JavaScript引擎：比較實施
Apr 13, 2025 am 12:05 AM
不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。
Python vs. JavaScript：學習曲線和易用性
Apr 16, 2025 am 12:12 AM
Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。
從C/C到JavaScript：所有工作方式
Apr 14, 2025 am 12:05 AM
從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。
JavaScript和Web：核心功能和用例
Apr 18, 2025 am 12:19 AM
JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。
JavaScript在行動中：現實世界中的示例和項目
Apr 19, 2025 am 12:13 AM
JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。
了解JavaScript引擎：實施詳細信息
Apr 17, 2025 am 12:05 AM
理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。
Python vs. JavaScript：社區，圖書館和資源
Apr 15, 2025 am 12:16 AM
Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。
Python vs. JavaScript：開發環境和工具
Apr 26, 2025 am 12:09 AM
Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。
