IndexedDB ist eine API mit niedriger Ebene, die eine große Anzahl strukturierter Daten (einschließlich Datei/ Blobs) für den Clientspeicher speichert. Die API verwendet einen Index, um eine hohe Performance -Suche nach den Daten zu erreichen.
In letzter Zeit gibt es ein Geschäftsanforderungen, das Daten offline speichern kann, und das Formular und die Bilder können hochgeladen werden, wenn Netzwerksignale vorhanden sind. Also habe ich die indizierte DB von HTML5 untersucht.
Für die Bedürfnisse nur für die Speicherung bestimmter Felder können lokaler Speicher und Sitzungspeicher verwendet werden, um zu vervollständigen. Sobald jedoch eine große Menge an Daten gespeichert ist, entsprechen lokaler Speicher und Sitzungsspeicher weit davon, den Anforderungen zu erfüllen. Zu diesem Zeitpunkt wird die Stärke von IndexedDB reflektiert.
1. Erstellen oder öffnen Sie die Datenbank/* Kompatibel mit verschiedenen Browsern -Indexen Version); // Name: Datenbankname, Version: Datenbankversionsnummer
Da indexedDB mit verschiedenen Browsern kompatibel ist, müssen wir einen Teil der Funktion mit indiziertenDB kompatibel sein.
2. Die mit der Datenbank verbundene Rückruffunktion Request.AdDeVentListener ('Erfolg', Funktion (Ereignis) {// Datenbankerfolg}, false); );Nach der Verbindung mit der Datenbank hört die Anforderung drei Staaten an:
Der upgradNeeded -Status besteht darin, diesen Status zu überwachen, wenn indexedDDB eine neue Datenbank und Indexedb.Open (Name, Version) (Datenbankversionsnummer) erstellt. Wenn sich die Versionsnummer nicht ändert, wird dieser Status nicht ausgelöst. Die Erstellung und Löschung des ObjectStore der Datenbank werden unter diesem Überwachungsereignis durchgeführt.
3. Erstellen und Löschen von ObjectStoreIn IndexedDB ähnelt ObjectStore der Datenbanktabelle.
Request.AdDeVentListener ('Upgradeeded', Funktion (Ereignis) {// Erstellen Sie eine Datenbankinstanz const db = event.target.result; // Die Datenbank db.close (); // BKyStorenames.Contains (ObjectStorenName);/ // Bystorenames.Contains (ObjectStorenName);/ // / Löschen von ObjectStore db.deleteObjectStore (ObjectStorename);}, False);Sie können die folgende Methode verwenden, um einen ObjectStore zu erstellen
Request.AdDeVentListener ('upgraReNeed', Funktion (Ereignis) {// Erstellen Sie eine Datenbankinstanz const db = event.target.result; // Bestimmen Sie, ob ObjectStore if (! Db.Objectstorenamen. Containes (ObjectStorenName) {const Store = vorhanden ist. db .createObjectStore (ObjectStorename, {Keypath: Keypath // Tastatur als Suchschlüsselwörter als Objektstore}); Index ist eindeutig});}}, false); 4. Daten Addition, Löschen, Änderungsprüfung Request.AdDeVentListener ('Erfolg', Funktion (Ereignis) {// Erstellen Sie eine Datenbankinstanz const db = event.target.result; // Finden Sie eine Objektstore db.transaction (ObjectStorenName, WA); // WA is 'readwrite',, Wenn die Daten gelesen und schreiben können //, wenn die Daten "readonly" sind, liest die Daten nur die const Store = Transaction.ObjectStore (ObjectStorename);}, False);Datenbankaddition, Löschung und Änderung:
// Daten hinzufügen. entsprechende Datenspeicher.Delete (Wert) entsprechend den angegebenen Schlüsselwörtern; ('Erfolg', Funktion (Ereignis) {// Die Rückruffunktion}, False);Finden Sie Daten nach Indizes
Const index = store.index (indexname); Wert // Datenergebnis.Continue ();
Finden Sie Daten gemäß dem Umfang des Index
const index = store.index (indexname); Das Idbkeyrange -Objekt ist die Daten des angegebenen Bereichs des angegebenen Bereichs des Zustands gemäß den Bedingungen*/// größer als oder mehr oder gleich dem Bereich = idbkeyrange.lowerbound (Wert, True) // (Wert, + ∞),> Valuerange = idbkeyrange. (Wert, Isopen) // größer als Wert des Wertes1, kleiner oder gleich gegenüber Wert 2Idbkeyrange
Schließlich ist eine Bibliothek von IndexedDB von mir selbst eingekapselt.
Das oben genannte ist der von Xiaobian eingeführte HTML5 -Speicherplatz. Vielen Dank für Ihre Unterstützung für die VEVB Wulin -Website!