So verwenden Sie IndexedDB als Datenbank

IndexedDB ist eine clientseitige NoSQL-Datenbank, mit der Sie strukturierte Daten im Webbrowser eines Benutzers speichern und abrufen können.

IndexedDB bietet gegenüber anderen Speicheroptionen wie localStorage mehrere Vorteile, z. B. einen größeren Arbeitsspeicher und Offline-Datenspeicherung und -abruf. Hier erfahren Sie, wie Sie IndexedDB als Datenbank verwenden.

Einrichten Ihrer Datenbank

Um die Datenbank zu erstellen, müssen Sie eine offene Anfrage mit IndexedDB erstellen offen Methode. Der offen Methode gibt ein zurück IDBOpenDBRequest Objekt. Dieses Objekt bietet Zugriff auf die Erfolg, Fehler, Und Upgrade erforderlichEreignisse ausgegeben aus dem offenen Betrieb.

Der offen -Methode akzeptiert zwei Argumente: einen Namen und eine optionale Versionsnummer. Das name-Argument repräsentiert den Namen Ihrer Datenbank. Die Versionsnummer gibt die Version der Datenbank an, mit der Ihre Anwendung arbeiten soll. Der Standardwert ist Null.

So erstellen Sie eine offene Anfrage:

konst openRequest = indexedDB.open("usersdb", 1);

Nachdem Sie die offene Anfrage erstellt haben, müssen Sie zuhören und behandeln die Ereignisse auf dem zurückgegebenen Objekt.

Der Erfolg Ereignis tritt auf, wenn Sie die Datenbank erfolgreich erstellt haben. Nach der Ausgabe erhalten Sie Zugriff auf Ihr Datenbankobjekt event.target.result:

openRequest.onsuccess = Funktion (Fall) {
konst db = event.target.result;
Konsole.Protokoll("Datenbank erstellt", db);
};

Das obige Beispiel verarbeitet ein Erfolgsereignis durch Protokollieren des Datenbankobjekts.

Der Fehler -Ereignis tritt auf, wenn IndexedDB beim Erstellen der Datenbank auf ein Problem stößt. Sie können damit umgehen, indem Sie den Fehler in der Konsole protokollieren oder andere verwenden Methoden zur Fehlerbehandlung:

openRequest.onerror = Funktion (Fall) {
// ...
};

Der Upgrade erforderlich Das Ereignis tritt auf, wenn Sie die Datenbank zum ersten Mal erstellen oder ihre Version aktualisieren. Es wird nur einmal ausgelöst und ist somit der ideale Ort, um einen Objektspeicher zu erstellen.

Erstellen eines Objektspeichers

Ein Objektspeicher ähnelt einer Tabelle in serverseitigen relationalen Datenbanken. Sie können einen Objektspeicher verwenden, um Schlüssel-Wert-Paare zu speichern.

Als Reaktion auf die sollten Sie Objektspeicher erstellen Upgrade erforderlich Fall. Dieses Ereignis wird ausgelöst, wenn Sie eine neue Version der Datenbank erstellen oder eine vorhandene Version aktualisieren. Dadurch wird sichergestellt, dass die Datenbank richtig konfiguriert und aktuell ist, bevor Sie Daten hinzufügen.

Sie können einen Objektspeicher mithilfe von erstellen createObjectStore -Methode, auf die Sie über eine Referenz Ihrer Datenbank zugreifen können. Diese Methode akzeptiert den Namen des Objektspeichers und ein Konfigurationsobjekt als Argumente.

Im Konfigurationsobjekt müssen Sie einen Primärschlüssel definieren. Sie können einen Primärschlüssel definieren, indem Sie einen Schlüsselpfad definieren, bei dem es sich um eine Eigenschaft handelt, die immer vorhanden ist und einen eindeutigen Wert enthält. Alternativ können Sie einen Schlüsselgenerator verwenden, indem Sie die Schlüsselpfad Eigentum an „Ausweis" und das autoInkrement Eigentum zu WAHR in Ihrem Konfigurationsobjekt.

Zum Beispiel:

openRequest.onupgradeneeded = Funktion (Fall) {
konst db = event.target.result;
// Erstellen Sie einen Objektspeicher
konst userObjectStore = db.createObjectStore("userStore", {
 Schlüsselpfad: "Ausweis",
 autoIncrement: WAHR,
 });
}

Dieses Beispiel erstellt einen Objektspeicher namens „userStore“ in Ihrer Datenbank und legt seinen Primärschlüssel auf eine automatisch inkrementierende ID fest.

Indizes definieren

In IndexedDB ist ein Index eine Möglichkeit, Daten effizienter zu organisieren und abzurufen. Dadurch können Sie den Objektspeicher durchsuchen und ihn basierend auf den indizierten Eigenschaften sortieren.

Um einen Index für einen Objektspeicher zu definieren, verwenden Sie die createIndex() Methode eines Objektspeicherobjekts. Diese Methode akzeptiert einen Indexnamen, einen Eigenschaftsnamen und ein Konfigurationsobjekt als Argumente:

userObjectStore.createIndex("Name", "Name", { einzigartig: FALSCH });
userObjectStore.createIndex("Email", "Email", { einzigartig: WAHR });

Dieser obige Codeblock definiert zwei Indizes, "name" und "email" auf der userObjectStore. Der „Name“-Index ist nicht eindeutig, was bedeutet, dass mehrere Objekte denselben Namenswert haben können, während der „E-Mail“-Index eindeutig ist und sicherstellt, dass keine zwei Objekte denselben E-Mail-Wert haben können.

Hier ist ein vollständiges Beispiel dafür, wie Sie mit einer umgehen können Upgrade erforderlich Fall:

openRequest.onupgradeneeded = Funktion (Fall) {
konst db = event.target.result;
// Erstellen Sie einen Objektspeicher
konst userObjectStore = db.createObjectStore("userStore", {
 Schlüsselpfad: "Ausweis",
 autoIncrement: WAHR,
 }); 
// Indizes erstellen
 userObjectStore.createIndex("Name", "Name", { einzigartig: FALSCH });
 userObjectStore.createIndex("Email", "Email", { einzigartig: WAHR });
};

Hinzufügen von Daten zu IndexedDB

Eine Transaktion in IndexedDB ist eine Möglichkeit, mehrere Lese- und Schreibvorgänge in einem einzigen Vorgang zu gruppieren. Um die Datenkonsistenz und -integrität sicherzustellen, wenn eine der Operationen innerhalb einer Transaktion fehlschlägt, setzt IndexedDB alle Operationen zurück.

Um Daten zu einer IndexedDB-Datenbank hinzuzufügen, müssen Sie eine Transaktion in dem Objektspeicher erstellen, dem Sie die Daten hinzufügen möchten, und dann die verwenden hinzufügen() -Methode für die Transaktion, um die Daten hinzuzufügen.

Sie können eine Transaktion erstellen, indem Sie die aufrufen Transaktion -Methode für Ihr Datenbankobjekt. Diese Methode akzeptiert zwei Argumente: Den (die) Namen Ihres Datenspeichers und den Transaktionsmodus, der sein kann schreibgeschützt (Standard) oder lesen Schreiben.

Rufen Sie dann an Objektspeicher () -Methode für die Transaktion und übergeben Sie den Namen des Objektspeichers, dem Sie Daten hinzufügen möchten. Diese Methode gibt einen Verweis auf den Objektspeicher zurück.

Ruf doch endlich mal an hinzufügen() -Methode im Objektspeicher und übergeben Sie die Daten, die Sie hinzufügen möchten:

konst addUserData = (Benutzerdaten, db) => {
// Öffnen Sie eine Transaktion
konst Transaktion = db.Transaktion ("userStore", "lesen Schreiben");
// Daten zum Objektspeicher hinzufügen
konst userObjectStore = transaktion.objectStore("userStore");
// Anfrage stellen, um userData hinzuzufügen
konst Anfrage = userObjectStore.add (Benutzerdaten);
// Ein Erfolgsereignis behandeln
 request.onsuccess = Funktion (Fall) {
//...
 };
// Fehler behandeln
 request.onerror = Funktion (Fall) {
//...
 };
};

Diese Funktion erstellt eine Transaktion mit dem Objektspeicher "userStore" und setzt den Modus auf "readwrite". Dann ruft es den Objektspeicher ab und fügt die hinzu Benutzerdaten dazu mit der hinzufügen Methode.

Abrufen von Daten aus IndexedDB

Um Daten aus einer IndexedDB-Datenbank abzurufen, müssen Sie eine Transaktion für den Objektspeicher erstellen, aus dem Sie die Daten abrufen möchten, und dann die verwenden erhalten() oder Nimm alle() -Methode für die Transaktion zum Abrufen der Daten abhängig von der Datenmenge, die Sie abrufen möchten.

Der erhalten() -Methode nimmt einen Wert für den Primärschlüssel des Objekts, das Sie abrufen möchten, und gibt das Objekt mit dem entsprechenden Schlüssel aus Ihrem Objektspeicher zurück.

Der Nimm alle() -Methode gibt alle Daten in einem Objektspeicher zurück. Es akzeptiert auch eine optionale Einschränkung als Argument und gibt alle übereinstimmenden Daten aus dem Speicher zurück.

konst getUserData = (id, db) => {
konst Transaktion = db.Transaktion ("userStore", "schreibgeschützt");
konst userObjectStore = transaktion.objectStore("userStore");
// Stellen Sie eine Anfrage, um die Daten zu erhalten
konst Anfrage = userObjectStore.get (id);
 request.onsuccess = Funktion (Fall) {
Konsole.log (Anfrage.Ergebnis);
 };
 request.onerror = Funktion (Fall) {
// Fehler behandeln
 };
};

Diese Funktion erstellt eine Transaktion mit dem Objektspeicher „userStore“ und setzt den Modus auf „readonly“. Anschließend werden Benutzerdaten mit der übereinstimmenden ID aus dem Objektspeicher abgerufen.

Aktualisieren von Daten mit IndexedDB

Um Daten in IndexedDB zu aktualisieren, müssen Sie eine Transaktion mit dem „readwrite“-Modus erstellen. Fahren Sie fort, indem Sie das zu aktualisierende Objekt mit abrufen erhalten() Methode. Ändern Sie dann das Objekt und rufen Sie die auf setzen() -Methode im Objektspeicher, um das aktualisierte Objekt wieder in der Datenbank zu speichern.

konst updateUserData = (ID, Benutzerdaten, Datenbank) => {
konst Transaktion = db.Transaktion ("userStore", "lesen Schreiben");
konst userObjectStore = transaktion.objectStore("userStore");
// Stellen Sie eine Anfrage, um die Daten zu erhalten
konst getRequest = userObjectStore.get (id);
// Ein Erfolgsereignis behandeln
 getRequest.onsuccess = Funktion (Fall) {
// Holen Sie sich die alten Benutzerdaten
konst user = event.target.result;
// Aktualisieren Sie die Benutzerdaten
 user.name = userData.name;
 user.email = userData.email;
// Anfrage stellen, um die Daten zu aktualisieren
konst putRequest = userObjectStore.put (Benutzer);
 putRequest.onsuccess = Funktion (Fall) {
// Erfolg behandeln
 };
 putRequest.onerror = Funktion (Fall) {
// Fehler behandeln
 };
 };
 getRequest.onerror = Funktion (Fall) {
// Fehler behandeln
 };
};

Diese Funktion erstellt eine Transaktion, um die Daten Ihrer Datenbank abzurufen und zu aktualisieren.

Löschen von Daten aus IndexedDB

Um Daten aus IndexedDB zu löschen, müssen Sie eine Transaktion mit dem „readwrite“-Modus erstellen. Dann ruf die an löschen() -Methode im Objektspeicher, um das Objekt aus der Datenbank zu entfernen:

konst deleteUserData = (id, db) => {
konst Transaktion = db.Transaktion ("userStore", "lesen Schreiben");
konst userObjectStore = transaktion.objectStore("userStore");
// Fordern Sie das Löschen der Daten an
konst Anfrage = userObjectStore.delete (id);
 request.onsuccess = Funktion (Fall) {
// Erfolg behandeln
 };
 request.onerror = Funktion (Fall) {
// Fehler behandeln
 };
};

Diese Funktion erstellt eine Transaktion, die die Daten mit der entsprechenden ID aus Ihrem Objektspeicher löscht.

Sollten Sie IndexedDB oder localStorage verwenden?

Die Wahl zwischen IndexedDB und anderen clientseitigen Datenbanken wie localStorage hängt von den Anforderungen Ihrer Anwendung ab. Nutzen Sie localStorage für die einfache Speicherung kleiner Datenmengen. Wählen Sie IndexedDB für große strukturierte Datensätze, die abgefragt und gefiltert werden müssen.