Beispiele für die Verwendung der IndexedDB -Datenbank in HTML5

Im lokalen Speicher von HTML5 gibt es eine Datenbank namens IndexedDB. Aus dem vorherigen Teil: HTML5 Advanced Series: Web Storage wissen wir, dass der Webspeicher problemlos auf einfache Daten im lokalen Zugriff zugreifen kann. Für eine große Anzahl strukturierter Speicher sind jedoch die Vorteile von IndexedB noch offensichtlicher. Schauen wir uns anschließend an, wie indizierteDB Daten speichert.

Eine Website kann mehrere indexierte DB -Datenbanken haben, aber der Name jeder Datenbank ist eindeutig. Wir müssen eine bestimmte Datenbank über den Datenbanknamen verbinden.

 var research = indexeddb.open ('dbname', 1); } Anfrage.

Wir verwenden die IndexedDB.Open -Methode, um die Datenbank zu verbinden. Diese Methode gibt ein idbopendBrequest -Objekt zurück, um ein Anforderungsobjekt darzustellen, das eine Datenbank anfordert. Wir können die Methode definieren, bei der die Verbindung erfolgreich ist oder durch Überwachung der ONSUCCCCESS- und ONERROR -Ereignisse des Anforderungsobjekts nicht ausgeführt wird.

Da das Data Warehouse in der Datenbank nicht zulässt, dass das Datenbanklager in derselben Version sich ändern kann, muss die neue Versionsnummer die Version in der Methode idexeddb.open aktualisieren, um die Datenbank wiederholt in derselben Version zu verändern. Die Versionsnummer muss eine Ganzzahl sein!

 var research = indexeddb.open ('dbname', 2); is = is = is = = ' + e.Newversion);}

Wir definieren die Methode, die ausgeführt wird, wenn die Datenbankversion aktualisiert wird, indem das OnUpgradeeded -Ereignis des Anforderungsobjekts überwacht wird.

Nach Verwendung von Indexedb.open zur Verbindung zum Datenbankerfolg wird ein IdbopendBrequest -Objekt zurückgegeben.

 var research = indexeddb.open ('dbname', 2); Close ();

 indexeddb.Deletedatabase ('dbname');

Der Objektspeicher ist die Grundlage für die IndexedDB -Datenbank.

 var research = indexeddb.open ('dbname', 3); 'userId', autoIncrement: false});

DB.CreateObjectStore -Methode empfängt zwei Parameter. Die Tastatureigenschaft in diesem Objekt ist der Hauptschlüssel, der der ID in der Datenbanktabelle als Hauptschlüssel entspricht. Das autoiincrement -Attribut ist falsch, was bedeutet, dass der Hauptschlüsselwert nicht von selbst erhöht wird.

Hinweis: In der Datenbank kann der Name des Objektlageres nicht wiederholt werden, andernfalls meldet der Browser einen Fehler.

In der IndexedDB -Datenbank wird ein Index über ein bestimmtes Attribut des Datenobjekts erstellt.

 var research = indexeddb.open ('dbname', 4); 'userId', autoIncrement: false});

Die Store.CreateinNex -Methode empfängt drei Parameter. Wert ist ein JS -Objekt. Die eindeutige Eigenschaft in diesem Objekt ist wahr, was bedeutet, dass der Indexwert nicht derselbe sein kann, dh der Benutzername der beiden Daten kann nicht gleich sein, und falsch kann der gleiche sein.

In IndexedDB können alle Datenoperationen nur in Angelegenheiten durchgeführt werden. Nachdem die Datenbank erfolgreich ist, können Sie die Transaktionsmethode des IdbopendBrequest -Objekts verwenden, um nur Lesen oder Lesen und Schreiben von Transaktionen zu öffnen.

 var research = indexeddb.open ('dbname', 5); tx.oncomplete = function (e) {console.log ('Die Transaktion ist über');} tx.onabort = Funktion (e) {console.log ('Transaktion wurde suspendiert');}}

Die DB.Transaction -Methode empfängt zwei Parameter. Der zweite Parameter ist der Transaktionsmodus. Kann zum Lesen und Schreibvorgängen in das Readwrite übertragen werden.

1. add (): Daten hinzufügen. Empfangen Sie einen Parameter an das Objekt, das im Objektlager gespeichert werden muss.
2. Put (): Daten hinzufügen oder ändern. Empfangen Sie einen Parameter an das Objekt, das im Objektlager gespeichert werden muss.
3. get (): Daten abrufen. Empfangen Sie einen Parameter in den primären Schlüsselwert, der erhalten werden muss.
4. Delete (): Löschen Sie die Daten. Empfangen Sie einen Parameter in den primären Schlüsselwert, der erhalten werden muss.

 var research = indexeddb.open ('dbname', 5); ',', ', Readwrite'); Wert); Löschen (1); }}}}}}

Die Rolle von Add und Put ist ähnlich. und verwenden Sie das Hinzufügen, um die Daten zu speichern.

Wir wissen, dass oben Daten mit der Get () -Methode erhalten werden können, aber der Hauptschlüsselwert ist erforderlich. Wenn wir einen Datenbereich erhalten möchten, können wir einen Cursor verwenden. Der Cursor wurde von der OpenCursor -Methode des Objektlageres erstellt und geöffnet.

Die OpenCursor -Methode empfängt zwei Parameter.

 // BoundRange repräsentiert eine Sammlung von Primärschlüsselwerten von 1 bis 10 (einschließlich 1 und 10). // Wenn der dritte Parameter wahr ist, bedeutet dies, dass der Mindestschlüsselwert nicht beträgt. (1, 10, Falsch falsch, falsch) Der einzige () Parameter ist der Hauptschlüsselwert, ein ganzzahliger Typ. varmingRange = idbkeyrange.only (1); // Der zweite Parameter ist optional, was bedeutet, dass TRUE nicht die minimale Primärschlüssel 1 enthält, False ist enthalten, und standardmäßig ist der Loggerrange = Idbkeyrange. des Primärschlüsselwerts weniger als 10 Essenz // Der zweite Parameter ist optional, was bedeutet, dass True nicht den größten Primärschlüssel 10 enthält, und Falsch umfasst, und der Standard ist Falsevar UpperRange = idbkeyrange.upePerbound (10, False);

Der zweite Parameter der OpenCursor -Methode repräsentiert die Leserichtung des Cursors.

1. Weiter: Die Daten im Cursor sind gemäß dem Primärschlüsselwert angeordnet.
2. NextUnique: Die Daten im Cursor sind nach dem Hauptschlüsselwert angeordnet.
3. PREV: Die Daten im Cursor sind gemäß dem Hauptwert des Hauptschlüsselwerts angeordnet.
4. Prävunique: Die Daten im Cursor sind vom Hauptwert des Hauptwerts angeordnet.

 var research = indexeddb.open ('dbname', 6); ',', ',' ReadWrite '); ; }

Wenn es Daten gibt, die den Suchbedingungen erfüllen, können Sie die Daten über die Aktualisierungsmethode aktualisieren:

 Cursor.updata ({userId: cursor.key, Benutzername: 'Hallo', Alter: 18});

Diese Daten können über die Löschmethode gelöscht werden:

 cursor.delete ();

Sie können die nächsten Daten weiter über die konstinue -Methode lesen. Andernfalls lesen Sie nach dem Lesen der ersten Daten nicht weiter:

 cursor.continue ();

Füllen Sie den vollständigen Prozess von IndexedDB -Zugriffsdaten aus, aus dem Verbinden von Datenbanken, dem Erstellen von Objektlagern, Indizes, dem Betriebs- und Abrufdaten. Im Folgenden eines vollständigen Beispiels, um die IndexedDB -Datenbank besser zu erfassen. Codeadresse: IndexedDB-Demo

Das oben genannte ist der Inhalt dieses Artikels.