Kuasai storan data dan pangkalan data tempatan dalam JavaScript-tutorial js-php.cn

Kuasai storan data dan pangkalan data tempatan dalam JavaScript

WBOY

Lepaskan： 2023-11-04 11:59:11

asal

1044 orang telah melayarinya

Kuasai storan data dan pangkalan data tempatan dalam JavaScript

Untuk menguasai storan data dan pangkalan data tempatan dalam JavaScript, contoh kod khusus diperlukan

Dalam beberapa tahun kebelakangan ini, dengan perkembangan pesat Internet dan populariti peranti pintar, penyimpanan dan pengurusan data telah menjadi salah satu aspek teknikal yang penting. keperluan. Dalam JavaScript, kaedah penyimpanan data sangat pelbagai, termasuk Kuki biasa, Storan Web, IndexedDB, dsb. Memahami dan menguasai kaedah penyimpanan data ini boleh membantu kami membangunkan dan mengurus aplikasi dengan lebih cekap.

Dalam artikel sebelumnya, kami telah memperkenalkan Kuki dan Storan Web dalam JavaScript secara terperinci Artikel ini akan memfokuskan pada pangkalan data tempatan yang lebih berkuasa dan kompleks-IndexedDB.

IndexedDB ialah API untuk mencipta dan mengurus pangkalan data dalam penyemak imbas, yang menyediakan cara yang sangat berkuasa dan fleksibel untuk menyimpan dan mendapatkan semula data. IndexedDB menggunakan struktur data pangkalan data bukan perhubungan, di mana data disimpan dalam bentuk pasangan nilai kunci dan menyokong penciptaan dan pertanyaan indeks.

Di bawah ini kami akan menggunakan contoh kod khusus untuk menunjukkan cara menggunakan IndexedDB untuk mencipta pangkalan data dalam penyemak imbas dan melaksanakan operasi penambahan, pemadaman, pengubahsuaian dan pertanyaan data.

Pertama, kita perlu mencipta halaman HTML dan menambah butang untuk mengendalikan IndexedDB dan bekas untuk memaparkan data:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>IndexedDB Demo</title>
</head>
<body>
  <button id="addButton">增加数据</button>
  <button id="deleteButton">删除数据</button>
  <button id="updateButton">更新数据</button>
  <button id="queryButton">查询数据</button>
  <div id="resultContainer"></div>
  <script src="main.js"></script>
</body>
</html>

Salin selepas log masuk

Kemudian, dalam fail JavaScript main.js, kita boleh menulis sekeping kod untuk mencipta pangkalan data IndexedDB dan Lakukan operasi menambah, memadam, mengemas kini dan menanyakan data:

// 打开或创建一个名为MyDatabase的IndexedDB数据库
var request = indexedDB.open("MyDatabase", 1);

// 如果数据库不存在，则创建
request.onupgradeneeded = function(event) {
  var db = event.target.result;
  var objectStore = db.createObjectStore("users", { keyPath: "id" });
  objectStore.createIndex("name", "name", { unique: false });
};

// 数据库创建成功后的回调函数
request.onsuccess = function(event) {
  var db = event.target.result;

  // 增加数据
  document.getElementById("addButton").onclick = function() {
    var transaction = db.transaction(["users"], "readwrite");
    var objectStore = transaction.objectStore("users");
    var user = { id: 1, name: "John Doe", age: 25 };
    var request = objectStore.add(user);

    request.onsuccess = function(event) {
      console.log("Data added successfully");
    };

    request.onerror = function(event) {
      console.log("Error adding data");
    };
  };

  // 删除数据
  document.getElementById("deleteButton").onclick = function() {
    var transaction = db.transaction(["users"], "readwrite");
    var objectStore = transaction.objectStore("users");
    var request = objectStore.delete(1);

    request.onsuccess = function(event) {
      console.log("Data deleted successfully");
    };

    request.onerror = function(event) {
      console.log("Error deleting data");
    };
  };

  // 更新数据
  document.getElementById("updateButton").onclick = function() {
    var transaction = db.transaction(["users"], "readwrite");
    var objectStore = transaction.objectStore("users");
    var request = objectStore.put({ id: 1, name: "Jane Doe", age: 30 });

    request.onsuccess = function(event) {
      console.log("Data updated successfully");
    };

    request.onerror = function(event) {
      console.log("Error updating data");
    };
  };

  // 查询数据
  document.getElementById("queryButton").onclick = function() {
    var transaction = db.transaction(["users"], "readonly");
    var objectStore = transaction.objectStore("users");
    var request = objectStore.get(1);

    request.onsuccess = function(event) {
      var user = event.target.result;
      var resultContainer = document.getElementById("resultContainer");
      resultContainer.innerHTML = "Name: " + user.name + ", Age: " + user.age;
    };

    request.onerror = function(event) {
      console.log("Error querying data");
    };
  };
};

// 数据库创建失败后的回调函数
request.onerror = function(event) {
  console.log("Error creating database");
};

Salin selepas log masuk

Melalui kod di atas, kami telah melaksanakan operasi menambah, memadam, mengemas kini dan menanya data masing-masing. Apabila pengguna mengklik butang, tindakan yang sepadan akan dicetuskan dan dilaksanakan.

Melalui contoh mudah ini, kita dapat melihat bahawa IndexedDB, sebagai pangkalan data tempatan, menyediakan pelbagai fungsi dan operasi fleksibel dalam JavaScript. Mahir dalam IndexedDB bukan sahaja boleh mengoptimumkan proses penyimpanan dan pertanyaan bagi sejumlah besar data, tetapi juga meningkatkan kelajuan tindak balas dan pengalaman pengguna aplikasi.

Ringkasnya, melalui contoh kod khusus, kami mempelajari cara menggunakan IndexedDB untuk penyimpanan dan pengurusan data dalam JavaScript. Walau bagaimanapun, menggunakan IndexedDB memerlukan pemahaman dan amalan yang lebih mendalam, serta pertimbangan keserasian penyemak imbas. Dalam pembangunan sebenar, kita perlu memilih kaedah penyimpanan data yang sesuai mengikut keperluan khusus untuk mencapai prestasi terbaik dan pengalaman pengguna.

Atas ialah kandungan terperinci Kuasai storan data dan pangkalan data tempatan dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!