Wie verwende ich IndexedDB? Leitfaden für vollständige CRUD-Operationen

Eine umfassende Anleitung zu IndexedDB: Das Kraftpaket des Browsers für clientseitige Speicherung

Da Webanwendungen immer ausgefeilter werden, ist der Bedarf an effizienten clientseitigen Speicherlösungen gewachsen. IndexedDB, eine Low-Level-API zum Speichern großer Mengen strukturierter Daten, ist ein leistungsstarkes Tool für Webentwickler, Softwareentwickler und Web-Enthusiasten, die robuste und offline-fähige Anwendungen erstellen möchten.

In diesem Blog werden wir anhand praktischer Beispiele untersuchen, was IndexedDB ist, wie es funktioniert und wie man es effektiv nutzt. Egal, ob Sie eine Progressive Web App (PWA), ein komplexes Dashboard oder ein Spiel erstellen, IndexedDB kann Ihnen bei der nahtlosen Datenverwaltung helfen.

---

Was ist IndexedDB?

IndexedDB ist eine browserbasierte NoSQL-Datenbank, die zum Speichern großer Mengen strukturierter Daten, einschließlich Dateien und Blobs, entwickelt wurde. Im Gegensatz zu Cookies oder localStorage können Sie mit IndexedDB Daten in einem strukturierten Format speichern und mithilfe von Indizes abfragen, was es ideal für komplexe Anwendungsfälle macht.

Hauptmerkmale von IndexedDB:

• Asynchrone Vorgänge: Interaktionen mit IndexedDB sind nicht blockierend und gewährleisten eine reibungslose Leistung.
• Strukturierte Datenspeicherung: Speichert Daten in Schlüssel-Wert-Paaren und ermöglicht so eine effiziente Abfrage mit Indizes.
• Offline-Fähigkeit: Daten werden lokal gespeichert, sodass sie ohne Internetverbindung zugänglich sind.
• Großes Speicherlimit: Bietet mehr Speicherkapazität im Vergleich zu Cookies oder localStorage.

Anwendungsfälle für IndexedDB:

• Progressive Web Apps: Speichern Sie Offline-Daten für nahtlose Erlebnisse.
• Großer Datenspeicher: Speichern Sie große Datensätze, z. B. Benutzereinstellungen oder Anwendungsstatus.
• Caching: API-Antworten zwischenspeichern, um die Leistung zu verbessern.

---

Erste Schritte mit IndexedDB

Wie funktioniert IndexedDB?

IndexedDB arbeitet mit einer Datenbankstruktur bestehend aus:

• Datenbanken: Container der obersten Ebene für Daten.
• Objektspeicher: Tabellen, in denen Daten gespeichert werden, jede durch einen eindeutigen Namen identifiziert.
• Indizes: Strukturen, die die Abfrage innerhalb von Objektspeichern optimieren.

IndexedDB-API: Grundlegende Vorgänge

Zu den Hauptoperationen in IndexedDB gehören:

1. Öffnen einer Datenbank: Erstellen oder Zugreifen auf eine Datenbank.
2. Objektspeicher erstellen: Speicher für Ihre Daten definieren.
3. Durchführen von CRUD-Operationen: Hinzufügen, Lesen, Aktualisieren und Löschen von Daten.
4. Transaktionen verwenden: Datenoperationen atomar verwalten.

---

Beispiel 1: Erstellen und Öffnen einer Datenbank

So erstellen Sie eine IndexedDB-Datenbank namens MyDatabase mit Objektspeicherbenutzern.

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);
};

Erklärung:

• Die Methode indexedDB.open öffnet oder erstellt die Datenbank.

• Das onupgradeneeded-Ereignis wird ausgelöst, wenn eine neue Datenbank erstellt oder ihre Version aktualisiert wird.

• Ein Objektspeicher namens „Benutzer“ wird mit der ID als Primärschlüssel erstellt.

---

Beispiel 2: Daten zum Objektspeicher hinzufügen

Sie können mithilfe einer Transaktion Daten zu einem Objektspeicher hinzufügen.

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");

Erklärung:

• Eine Transaktion wird mit dem Lese-/Schreibmodus erstellt, um Daten zu ändern.

• Die Add-Methode fügt Daten in den Objektspeicher des Benutzers ein.

---

Beispiel 3: Daten aus dem Objektspeicher lesen

Rufen Sie Daten mit der Get-Methode ab oder durchlaufen Sie alle Einträge.

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);

Erklärung:

• Die Get-Methode ruft einen bestimmten Datensatz anhand seines Schlüssels ab.

• Der Datenabruf erfolgt asynchron, daher werden Erfolgs- und Fehlerhandler verwendet.

---

Beispiel 4: Aktualisieren von Daten in IndexedDB

Aktualisieren Sie vorhandene Datensätze mit der Put-Methode.

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" });

---

Beispiel 5: Daten in IndexedDB löschen

Entfernen Sie einen Datensatz mit der Löschmethode.

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 im Vergleich zu anderen Speicherlösungen

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

---

Best Practices für die Verwendung von IndexedDB

• Transaktionen ordnungsgemäß verwenden: Verwalten Sie Datenvorgänge immer innerhalb von Transaktionen, um die Atomizität sicherzustellen.

• Fehler ordnungsgemäß behandeln: Implementieren Sie Fehlerhandler für besseres Debugging und Benutzerfeedback.

• Versionskontrolle: Erhöhen Sie die Datenbankversion sorgfältig, um Schemaänderungen zu verwalten.

• Offline-Szenarien testen: IndexedDB wird häufig für Offline-Funktionen verwendet; Stellen Sie sicher, dass es ohne Internetverbindung wie erwartet funktioniert.

---

Abschluss

IndexedDB ist ein leistungsstarkes Tool für die clientseitige Datenspeicherung und bietet Funktionen, die herkömmliche Speichermethoden wie localStorage bei weitem übertreffen. Mit der Unterstützung strukturierter Daten, großer Speicherkapazität und Offline-Funktionalität ist IndexedDB eine wesentliche Technologie für die Erstellung moderner Webanwendungen.

Wichtige Erkenntnisse:

• IndexedDB ist ideal für die lokale Speicherung großer und komplexer Datensätze.

• Transaktionen sind von zentraler Bedeutung für die Verwaltung von Datenvorgängen in IndexedDB.

• Es bietet robuste Offline-Unterstützung und ist damit ein Eckpfeiler von Progressive Web Apps.

Durch die Beherrschung von IndexedDB können Sie skalierbare Offline-First-Anwendungen mit überragender Leistung und Benutzererfahrung erstellen. Beginnen Sie noch heute mit IndexedDB in Ihren Projekten zu experimentieren!

Das obige ist der detaillierte Inhalt vonWie verwende ich IndexedDB? Leitfaden für vollständige CRUD-Operationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!