Bagaimana untuk menyimpan data ke dalam DOM?-tutorial js-php.cn

Bagaimana untuk menyimpan data ke dalam DOM?

PHPz

Lepaskan： 2023-09-14 23:41:11

ke hadapan

1119 orang telah melayarinya

如何将数据存储到 DOM 中？

Menyimpan data dalam DOM bermaksud menyimpan data dalam format teks biasa. Sebagai contoh, kami menyimpan data dalam pembolehubah keadaan semasa menggunakan React atau mana-mana rangka kerja reaktif yang lain. Apabila pengguna mengemas kini data dalam medan input, ia menyimpan data yang dikemas kini dalam pembolehubah keadaan.

Jadi kami menyimpan data dalam pembolehubah keadaan sebelum menyerahkan borang. Apabila borang diserahkan, kami menggunakan nilai pembolehubah keadaan.

Dalam JavaScript biasa, kita boleh melakukan perkara yang sama seperti menyimpan data dalam format teks biasa dan apabila kita perlu menyerahkan borang, kita boleh mendapatkan data daripada DOM dan bukannya mendapatkan data daripada medan input.

Di sini, kita akan belajar untuk menyimpan data dalam DOM menggunakan JavaScript dan Jquery.

Gunakan JavaScript untuk menyimpan data dalam DOM

Dalam JavaScript, kita boleh mencipta objek untuk menyimpan data. Kita boleh menyimpan data dalam objek dalam format teks biasa dan mendapatkannya daripada objek apabila diperlukan.

Tatabahasa

Pengguna boleh menggunakan JavaScript untuk menyimpan data dalam DOM mengikut sintaks berikut.

let data_obj = {
   prop1: "",  
}
data_obj.prop1 = value;

Salin selepas log masuk

Dalam sintaks di atas, kami mencipta objek data_obj untuk menyimpan data dan kami boleh mengemas kini nilainya.

Contoh

Dalam contoh di bawah, kami telah mencipta borang dengan dua medan input. Selain itu, kami memberi setiap medan input nama. Setiap kali pengguna mengklik pada fungsi data kedai, ia memanggil fungsi storeInDOM(), yang mengambil nilai input dan menyimpannya dalam objek. Setiap kali pengguna menekan butang "Dapatkan Data Tersimpan", ia memanggil fungsi getFromDOM(), yang mengakses data daripada objek 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>

Salin selepas log masuk

Dalam output, pengguna boleh melihat data yang disimpan.
Gunakan jQuery untuk menyimpan data dalam DOM

jQuery termasuk API data, yang boleh kita panggil menggunakan kaedah data(). Kami boleh menyimpan data untuk elemen tertentu. Apabila kami menghantar dua parameter kepada API data, ia menyimpan data untuk elemen tertentu jika tidak, ia mengembalikan data yang disimpan untuk elemen tertentu.

Tatabahasa

Pengguna boleh menggunakan kaedah data() Jquery untuk menyimpan data dalam DOM mengikut sintaks berikut.

$("CSS_identifier ").data("key_name", value);

Salin selepas log masuk

Pengecam CSS digunakan untuk memilih elemen dalam sintaks di atas. Kaedah data() mengambil kunci sebagai parameter pertama dan nilai berkaitan sebagai parameter kedua.

Contoh

Borang tersebut mengandungi medan input e-mel dan kata laluan seperti contoh di bawah. Setiap kali pengguna menekan butang untuk menyimpan data, kami menggunakan Jquery untuk memasukkan nilai dan menyimpannya dalam DOM elemen tertentu menggunakan kaedah data(). Di sini, $("#email").data("email", email) akan mengakses input dengan id bersamaan dengan e-mel dan menyimpan 'e-mel' sebagai kunci dan nilai input sebagai nilai kunci 'e-mel'.

Oleh itu, kami boleh menggunakan kaedah data() untuk menyimpan pasangan nilai kunci dengan mana-mana elemen sebagai rujukan, dan pengguna juga perlu menggunakan elemen yang sama sebagai rujukan semasa mengakses 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>

Salin selepas log masuk

Pengguna belajar untuk menyimpan data dalam DOM. Walau bagaimanapun, menyimpan data dalam DOM adalah amalan buruk kerana ia bersifat sementara. Pengguna boleh menggunakan storan setempat atau sesi penyemak imbas untuk menyimpan data, dan sintaksnya mudah.

Dalam JQuery, pengguna boleh menggunakan API data untuk menyimpan data bagi elemen tertentu. Dalam JavaScript, pengguna perlu menyimpan semua data dalam satu atau berbilang objek.

Atas ialah kandungan terperinci Bagaimana untuk menyimpan data ke dalam DOM?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!