首頁 > 文章 > web前端 > 如何將資料儲存到 DOM 中？

如何將資料儲存到 DOM 中？

PHPz轉載: 2023-09-14 23:41:111065瀏覽

如何将数据存储到 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' 鍵的值。 p>

因此，我們可以使用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中文網其他相關文章！

JavaScript jquery css 标识符对象 dom

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何在 Node.js 和瀏覽器之間共用程式碼？下一篇：如何在 Node.js 和瀏覽器之間共用程式碼？

看更多