IndexedDB

Soalan Apakah yang Diselesaikan oleh IndexedDB?

---

IndexedDB ialah penyelesaian untuk menyimpan sejumlah besar data berstruktur, walaupun di luar talian. Ia menyelesaikan masalah storan tempatan yang cekap untuk aplikasi web, membolehkan mereka mengakses, mengemas kini dan menanyakan set data yang besar secara langsung pada bahagian pelanggan.

---

Masalah Utama IndexedDB Selesai:

• Storan tempatan yang berterusan bagi data berstruktur.
• Penyimpanan yang cekap dan mendapatkan semula set data yang besar.
• Fungsi merentasi mod luar talian dan dalam talian.
• Akses tak segerak kepada data, menghalang sekatan urutan utama.

---

Contoh Kod:

// Open an IndexedDB database
let request = indexedDB.open("MyDatabase", 1);

request.onupgradeneeded = function(event) {
  let db = event.target.result;
  // Create an object store
  let objectStore = db.createObjectStore("users", { keyPath: "id" });
  objectStore.createIndex("name", "name", { unique: false });
};

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

---

Cara Menggunakan IndexedDB

Buka Pangkalan Data: Buka pangkalan data IndexedDB dengan fungsi indexedDB.open().
Cipta Stor Objek: Stor objek adalah serupa dengan jadual dalam pangkalan data hubungan.
Lakukan Transaksi: Gunakan transaksi untuk menambah, mendapatkan semula, mengemas kini atau memadam data.
Penciptaan Indeks: Indeks digunakan untuk mencari data dalam stor objek.
Pengendalian Ralat: Kendalikan operasi tak segerak dengan pendengar acara.

// Adding data to IndexedDB
let addData = function(db) {
  let transaction = db.transaction(["users"], "readwrite");
  let objectStore = transaction.objectStore("users");

  let user = { id: 1, name: "Alice", email: "alice@example.com" };
  let request = objectStore.add(user);

  request.onsuccess = function() {
    console.log("User added to IndexedDB!");
  };
};

// Retrieve data
let getData = function(db) {
  let transaction = db.transaction(["users"], "readonly");
  let objectStore = transaction.objectStore("users");

  let request = objectStore.get(1);
  request.onsuccess = function(event) {
    console.log("User:", event.target.result);
  };
};

---

Kelebihan IndexedDB
IndexedDB menawarkan beberapa kelebihan utama yang menjadikannya sesuai untuk aplikasi web moden

• Kapasiti Storan Besar: IndexedDB boleh menyimpan lebih banyak data berbanding localStorage atau sessionStorage

• Akses Asynchronous: Menghalang UI dengan menggunakan operasi I/O yang tidak menyekat.

• Pengendalian Data Kompleks: Menyokong data berstruktur, termasuk tatasusunan, objek dan gumpalan.

• Sokongan Luar Talian: Berfungsi dalam talian dan luar talian, membenarkan kes penggunaan Apl Web Progresif (PWA).

• Carian Berindeks: Data boleh dicari dengan cekap melalui indeks.
  

// Create an index to improve search performance
objectStore.createIndex("email", "email", { unique: true });

let emailIndex = objectStore.index("email");
let request = emailIndex.get("alice@example.com");

request.onsuccess = function(event) {
  console.log("User found by email:", event.target.result);
};

*Memahami Indeks IndexedDB
*

Apakah Indeks IndexedDB?
Indeks IndexedDB ialah struktur data tambahan dalam stor objek yang membolehkan mendapatkan semula data yang cekap berdasarkan sifat tertentu. Indeks terdiri daripada laluan utama (satu atau lebih sifat) dan pilihan untuk menentukan keunikan dan susunan pengisihan. Dengan mencipta indeks, anda boleh mengoptimumkan operasi pertanyaan dan penapisan data, yang membawa kepada prestasi yang lebih baik.

Kepentingan Indeks dalam IndexedDB
Indeks memainkan peranan penting dalam meningkatkan prestasi pengambilan data dalam IndexedDB. Tanpa indeks, pertanyaan data berdasarkan sifat tertentu akan memerlukan lelaran ke atas semua rekod, menghasilkan perolehan data yang lebih perlahan dan kurang cekap. Indeks membolehkan akses terus kepada data berdasarkan sifat diindeks, mengurangkan keperluan untuk imbasan jadual penuh dan meningkatkan kelajuan pelaksanaan pertanyaan dengan ketara.

let transaction = db.transaction("MyObjectStore", "readonly");
let objectStore = transaction.objectStore("MyObjectStore");
let index = objectStore.index("nameIndex");

let cursorRequest = index.openCursor();

cursorRequest.onsuccess = function(event) {
  let cursor = event.target.result;
  if (cursor) {
    // Access the current record
    console.log(cursor.value);

    // Move to the next record
    cursor.continue();
  }
};

Menapis Data dengan Julat Pertanyaan IndexedDB
Indeks juga membolehkan pertanyaan julat, membolehkan anda menapis data berdasarkan julat nilai. Berikut ialah contoh mendapatkan semula rekod dalam julat umur tertentu:

let transaction = db.transaction("MyObjectStore", "readonly");
let objectStore = transaction.objectStore("MyObjectStore");
let index = objectStore.index("ageIndex");

let range = IDBKeyRange.bound(18, 30); // Records with age between 18 and 30

let cursorRequest = index.openCursor(range);

cursorRequest.onsuccess = function(event) {
  let cursor = event.target.result;
  if (cursor) {
    // Process the record within the desired age range
    console.log(cursor.value);

    // Move to the next record
    cursor.continue();
  }
};

---

Isih Data dengan Indeks

Indeks juga boleh digunakan untuk mengisih data dalam IndexedDB. Dengan membuka kursor pada indeks dan menentukan susunan pengisihan yang diingini, anda boleh mendapatkan semula rekod dalam susunan yang diingini.

let transaction = db.transaction("MyObjectStore", "readonly");
let objectStore = transaction.objectStore("MyObjectStore");
let index = objectStore.index("nameIndex");

let cursorRequest = index.openCursor(null, "next"); // Sorted in ascending order

cursorRequest.onsuccess = function(event) {
  let cursor = event.target.result;
  if (cursor) {
    // Process the record
    console.log(cursor.value);

    // Move to the next record
    cursor.continue();
  }
};

Penyelenggaraan Indeks dan Peningkatan Skema

Menambah Indeks Baharu pada Kedai Objek Sedia Ada
Untuk menambah indeks baharu pada stor objek sedia ada, anda perlu mengendalikan proses peningkatan pangkalan data. Berikut ialah contoh menambah indeks baharu semasa peningkatan pangkalan data.

let request = indexedDB.open("MyDatabase", 2);

request.onupgradeneeded = function(event) {
  let db = event.target.result;
  let objectStore = db.createObjectStore("MyObjectStore", { keyPath: "id" });

  // Add a new index during upgrade
  objectStore.createIndex("newIndex", "newProperty", { unique: false });
};

Dalam contoh ini, kami menaik taraf versi pangkalan data daripada 1 kepada 2 dan menambah indeks baharu bernama “newIndex” pada sifat “newProperty”.

---

Pertimbangan Prestasi dan Amalan Terbaik
Memilih Indeks IndexedDB yang Betul
Apabila membuat indeks, adalah penting untuk memilih sifat untuk diindeks dengan teliti berdasarkan corak akses data aplikasi anda. Indeks harus dibuat pada sifat yang biasa digunakan untuk menapis, mengisih atau mencari untuk memaksimumkan faedahnya.

Menghadkan Saiz Indeks dan Kesan Prestasi
Indeks yang besar boleh menggunakan ruang storan yang ketara dan memberi kesan kepada prestasi. Adalah dinasihatkan untuk mengehadkan bilangan indeks dan memilih laluan utama yang diperlukan untuk mendapatkan data yang cekap. Elakkan pengindeksan yang berlebihan untuk mengekalkan prestasi optimum.

Monitoring Index Performance
Regularly monitor the performance of your IndexedDB indexes using browser developer tools and profiling techniques. Identify any slow queries or bottlenecks and optimize your indexes accordingly. It may involve modifying the index structure or adding additional indexes to improve query execution speed.

---

Cursor in IndexedDB

let request = indexedDB.open("MyDatabase", 1);

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

  let cursorRequest = objectStore.openCursor();
  let batchSize = 10;
  let count = 0;

  cursorRequest.onsuccess = function(event) {
    let cursor = event.target.result;
    if (cursor) {
      console.log("Key:", cursor.key, "Value:", cursor.value);
      count++;

      // If batch size is reached, stop processing
      if (count 




<hr>

<p><strong>IndexedDB Sharding</strong></p>

<p>Sharding is a technique, normally used in server side databases, where the database is partitioned horizontally. Instead of storing all documents at one table/collection, the documents are split into so called shards and each shard is stored on one table/collection. This is done in server side architectures to spread the load between multiple physical servers which increases scalability.</p>

<p>When you use IndexedDB in a browser, there is of course no way to split the load between the client and other servers. But you can still benefit from sharding. Partitioning the documents horizontally into multiple IndexedDB stores, has shown to have a big performance improvement in write- and read operations while only increasing initial pageload slightly.</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/172562768114980.jpg" alt="IndexedDB"></p>


<hr>

<p><strong>Conclusion</strong><br>
IndexedDB represents a paradigm shift in browser-based storage, empowering developers to build powerful web applications with offline capabilities and efficient data management. By embracing IndexedDB and adhering to best practices, developers can unlock new possibilities in web development, delivering richer and more responsive user experiences across a variety of platforms and devices. As the web continues to evolve, IndexedDB stands as a testament to the innovative solutions driving the next generation of web applications.</p>


<hr>


          

            
        

Atas ialah kandungan terperinci IndexedDB. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!