Bagaimana untuk menggunakan IndexedDB? Panduan mengenai Operasi CRUD yang lengkap

Panduan Komprehensif untuk IndexedDB: Kuasa Penyemak Imbas untuk Storan Sisi Pelanggan

Apabila aplikasi web menjadi lebih canggih, keperluan untuk penyelesaian storan sisi pelanggan yang cekap telah berkembang. IndexedDB, API peringkat rendah untuk menyimpan sejumlah besar data berstruktur, ialah alat yang berkuasa untuk pembangun web, jurutera perisian dan peminat web yang ingin mencipta aplikasi yang mantap dan berkemampuan luar talian.

Dalam blog ini, kami akan meneroka apa itu IndexedDB, cara ia berfungsi dan cara menggunakannya dengan berkesan dengan contoh praktikal. Sama ada anda sedang membina Apl Web Progresif (PWA), papan pemuka yang kompleks atau permainan, IndexedDB boleh membantu anda mengurus data dengan lancar.

---

Apakah IndexedDB?

IndexedDB ialah pangkalan data NoSQL berasaskan pelayar yang direka untuk menyimpan sejumlah besar data berstruktur, termasuk fail dan gumpalan. Tidak seperti kuki atau localStorage, IndexedDB membenarkan anda menyimpan data dalam format berstruktur dan menanyakannya menggunakan indeks, menjadikannya sesuai untuk kes penggunaan yang kompleks.

Ciri Utama IndexedDB:

• Operasi Asynchronous: Interaksi dengan IndexedDB tidak menyekat, memastikan prestasi lancar.
• Storan Data Berstruktur: Menyimpan data dalam pasangan nilai kunci, membolehkan pertanyaan yang cekap dengan indeks.
• Keupayaan Luar Talian: Data disimpan secara setempat, menjadikannya boleh diakses tanpa sambungan Internet.
• Had Storan Besar: Menawarkan lebih banyak kapasiti storan berbanding kuki atau localStorage.

Gunakan Kes untuk IndexedDB:

• Apl Web Progresif: Simpan data luar talian untuk pengalaman yang lancar.
• Storan Data Besar: Simpan set data yang besar, seperti pilihan pengguna atau keadaan aplikasi.
• Caching: Cache API respons untuk prestasi yang lebih baik.

---

Bermula dengan IndexedDB

Bagaimanakah IndexedDB Berfungsi?

IndexedDB beroperasi pada struktur pangkalan data yang terdiri daripada:

• Pangkalan data: Bekas peringkat atas untuk data.
• Stor Objek: Jadual tempat data disimpan, setiap satunya dikenal pasti dengan nama unik.
• Indeks: Struktur yang mengoptimumkan pertanyaan dalam stor objek.

API IndexedDB: Operasi Asas

Operasi utama dalam IndexedDB termasuk:

1. Membuka Pangkalan Data: Mencipta atau mengakses pangkalan data.
2. Mencipta Kedai Objek: Menentukan storan untuk data anda.
3. Melaksanakan Operasi CRUD: Menambah, membaca, mengemas kini dan memadam data.
4. Menggunakan Transaksi: Mengurus operasi data secara atom.

---

Contoh 1: Mencipta dan Membuka Pangkalan Data

Berikut ialah cara untuk mencipta pangkalan data IndexedDB yang dipanggil MyDatabase dengan pengguna kedai objek.

const dbName = "MyDatabase";
const dbVersion = 1; // Versioning is required for schema updates.

const request = indexedDB.open(dbName, dbVersion);

request.onupgradeneeded = function (event) {
  const db = event.target.result;

  // Create an object store named 'users' with 'id' as the keyPath
  if (!db.objectStoreNames.contains("users")) {
    db.createObjectStore("users", { keyPath: "id" });
  }
  console.log("Database setup complete");
};

request.onsuccess = function (event) {
  const db = event.target.result;
  console.log("Database opened successfully");
};

request.onerror = function (event) {
  console.error("Error opening database:", event.target.errorCode);
};

Penjelasan:

• Kaedah indexedDB.open membuka atau mencipta pangkalan data.

• Acara onupgradeneeded dicetuskan apabila mencipta pangkalan data baharu atau meningkatkan versinya.

• Stor objek bernama pengguna dicipta dengan id sebagai kunci utama.

---

Contoh 2: Menambah Data pada Stor Objek

Anda boleh menambah data pada stor objek menggunakan transaksi.

function addUser(id, name, email) {
  const request = indexedDB.open("MyDatabase", 1);

  request.onsuccess = function (event) {
    const db = event.target.result;
    const transaction = db.transaction("users", "readwrite");
    const objectStore = transaction.objectStore("users");

    const user = { id, name, email };
    const addRequest = objectStore.add(user);

    addRequest.onsuccess = function () {
      console.log("User added:", user);
    };

    addRequest.onerror = function (event) {
      console.error("Error adding user:", event.target.errorCode);
    };
  };
}

// Add a new user
addUser(1, "John Doe", "john.doe@example.com");

Penjelasan:

• Transaksi dibuat dengan mod tulis baca untuk mengubah suai data.

• Kaedah tambah memasukkan data ke dalam stor objek pengguna.

---

Contoh 3: Membaca Data daripada Stor Objek

Dapatkan semula data dengan menggunakan kaedah dapatkan atau ulangi semua entri.

function getUser(id) {
  const request = indexedDB.open("MyDatabase", 1);

  request.onsuccess = function (event) {
    const db = event.target.result;
    const transaction = db.transaction("users", "readonly");
    const objectStore = transaction.objectStore("users");

    const getRequest = objectStore.get(id);

    getRequest.onsuccess = function () {
      if (getRequest.result) {
        console.log("User found:", getRequest.result);
      } else {
        console.log("User not found");
      }
    };

    getRequest.onerror = function (event) {
      console.error("Error retrieving user:", event.target.errorCode);
    };
  };
}

// Get user with ID 1
getUser(1);

Penjelasan:

• Kaedah get mengambil rekod tertentu dengan kuncinya.

• Pendapatan data tidak segerak, jadi pengendali kejayaan dan ralat digunakan.

---

Contoh 4: Mengemas kini Data dalam IndexedDB

Kemas kini rekod sedia ada menggunakan kaedah put.

function updateUser(id, updatedData) {
  const request = indexedDB.open("MyDatabase", 1);

  request.onsuccess = function (event) {
    const db = event.target.result;
    const transaction = db.transaction("users", "readwrite");
    const objectStore = transaction.objectStore("users");

    const putRequest = objectStore.put({ ...updatedData, id });

    putRequest.onsuccess = function () {
      console.log("User updated:", { ...updatedData, id });
    };

    putRequest.onerror = function (event) {
      console.error("Error updating user:", event.target.errorCode);
    };
  };
}

// Update user with ID 1
updateUser(1, { name: "Johnathan Doe", email: "johnathan.doe@example.com" });

---

Contoh 5: Memadam Data dalam IndexedDB

Alih keluar rekod menggunakan kaedah padam.

function deleteUser(id) {
  const request = indexedDB.open("MyDatabase", 1);

  request.onsuccess = function (event) {
    const db = event.target.result;
    const transaction = db.transaction("users", "readwrite");
    const objectStore = transaction.objectStore("users");

    const deleteRequest = objectStore.delete(id);

    deleteRequest.onsuccess = function () {
      console.log("User deleted with ID:", id);
    };

    deleteRequest.onerror = function (event) {
      console.error("Error deleting user:", event.target.errorCode);
    };
  };
}

// Delete user with ID 1
deleteUser(1);

---

IndexedDB lwn Penyelesaian Storan Lain

Feature	IndexedDB	localStorage	sessionStorage
Storage Limit	Several MB to GB	5 MB (approx)	5 MB (approx)
Data Format	Key-value pairs	Key-value pairs	Key-value pairs
Asynchronous	Yes	No	No
Structured Data	Yes	No	No

---

Amalan Terbaik untuk Menggunakan IndexedDB

• Gunakan Transaksi Dengan Betul: Sentiasa uruskan operasi data dalam transaksi untuk memastikan atomicity.

• Kendalikan Ralat Dengan Anggun: Laksanakan pengendali ralat untuk nyahpepijat dan maklum balas pengguna yang lebih baik.

• Kawalan Versi: Tingkatkan versi pangkalan data dengan berhati-hati untuk mengurus perubahan skema.

• Uji Senario Luar Talian: IndexedDB sering digunakan untuk keupayaan luar talian; pastikan ia berfungsi seperti yang diharapkan tanpa sambungan internet.

---

Kesimpulan

IndexedDB ialah alat yang berkuasa untuk storan data pihak pelanggan, menawarkan ciri yang jauh mengatasi kaedah storan tradisional seperti localStorage. Dengan sokongan untuk data berstruktur, kapasiti storan yang besar dan kefungsian luar talian, IndexedDB ialah teknologi penting untuk membina aplikasi web moden.

Pengambilan Utama:

• IndexedDB sesuai untuk menyimpan set data yang besar dan kompleks secara setempat.

• Transaksi adalah penting untuk mengurus operasi data dalam IndexedDB.

• Ia menyediakan sokongan luar talian yang mantap, menjadikannya asas bagi Apl Web Progresif.

Dengan menguasai IndexedDB, anda boleh membina aplikasi berskala, mengutamakan luar talian dengan prestasi dan pengalaman pengguna yang unggul. Mula bereksperimen dengan IndexedDB dalam projek anda hari ini!

Atas ialah kandungan terperinci Bagaimana untuk menggunakan IndexedDB? Panduan mengenai Operasi CRUD yang lengkap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!