Gängige Frontend-Datenspeicherlösungen umfassen hauptsächlich:Cookie、Web Storage、IndexedDB、WebSQL、local Storage、session Storageusw., zum Beispiel:
| charakteristisch | Keks | localStorage | sessionStorage | indexedDB | | Datenlebenszyklus | In der Regel kann die Ablaufzeit vom Server generiert werden; Komponenten wie Frontend-Adoption und JS-Cookie können ebenfalls generiert werden | Solange es nicht aufgeräumt wird, ist es immer da; Wenn der Browser geschlossen ist, wird er ebenfalls lokal gespeichert, aber browserübergreifend wird nicht unterstützt. | Das Reinigen und Aktualisieren der Seite bleibt bestehen, wenn die Seite geschlossen ist, und Seitenübergreifende Interaktionen werden nicht unterstützt | Sofern es nicht beseitigt wurde, hat es schon immer existiert. | | Größe des Datenspeichers | 4K | 5M | 5M | Keine Größenbegrenzung | | Kommunizieren Sie mit dem Server | Sie wird jedes Mal im angeforderten Header übertragen, was sich auf die Leistung der Anfrage auswirkt; Gleichzeitig ist es, da es in der Anfrage enthalten ist, auch anfällig für Sicherheitsprobleme | Nicht teilnehmen | Nicht teilnehmen | Nicht teilnehmen | | Besonderheit | String-Schlüssel-Wert-Paare speichern Daten lokal | String-Schlüssel-Wert-Paare speichern Daten lokal | String-Schlüssel-Wert-Paare speichern Daten lokal | IndexedDB ist eine nicht-relationale Datenbank (Operationen über SQL-Anweisungen werden nicht unterstützt). Es kann große Datenmengen speichern, Schnittstellen für Abfragen bereitstellen und Indizes erstellen, die andere Speicherlösungen nicht bereitstellen können. |
IndexedDB
Dieser Artikel beschreibt hauptsächlich die Nutzung von IndexedDB für Frontend-Speicher und wird wie folgt eingeführt:
IndexedDB ist eine zugrundeliegende API zur Speicherung großer Mengen strukturierter Daten (auch Datei-/Binärobjekte (Blobs)) auf der Clientseite. Die API verwendet Indizes, um leistungsstarke Datensuche zu ermöglichen. Obwohl Webspeicher für kleinere Datenmengen nützlich ist, ist er nicht so gut wie größere Mengen strukturierter Daten. IndexedDB bietet eine Lösung für dieses Szenario. Diese Seite ist die Hauptleitfaden für MDN IndexedDB – hier bieten wir eine vollständige API-Referenz und einen Nutzungsleitfaden, Details zur Browserunterstützung sowie Links zu einigen Erklärungen zu Schlüsselkonzepten.
IndexedDB verfügt über folgende Funktionen:
(1) Speicherung von Schlüsselwertpaaren. IndexedDB verwendet einen Objektspeicher, um Daten zu speichern. Alle Datentypen können direkt abgelegt werden, einschließlich JavaScript-Objekte. Im Objekt-Repository werden die Daten in Form von "Schlüssel-Wert-Paare" gespeichert, und jeder Datensatz hat einen entsprechenden Primärschlüssel, der eindeutig ist und nicht dupliziert werden kann, sonst wird ein Fehler angezeigt.
(2) Asynchron. IndexedDB sperrt den Browser nicht und der Benutzer kann weiterhin andere Operationen ausführen, im Gegensatz zu LocalStorage, das synchron arbeitet. Asynchrones Design soll verhindern, dass große Datenmengen gelesen und geschrieben werden, was die Leistung von Webseiten verlangsamt.
(3) Unterstützungsangelegenheiten. IndexedDB unterstützt Transaktionen, was bedeutet, dass, wenn einer der Operationsschritte fehlschlägt, die gesamte Transaktion abgebrochen wird und die Datenbank in den Zustand vor der Transaktion zurückgesetzt wird, sodass es keinen Fall gibt, nur einen Teil der Daten umzuschreiben.
(4) Homologie-Restriktion. IndexedDB unterliegt demselben Ursprungslimit, und jede Datenbank entspricht dem Domainnamen, der sie erstellt hat. Webseiten können Datenbanken nur unter eigenen Domainnamen aufrufen, nicht auf domänenübergreifende Datenbanken.
(5) Großer Lagerraum. IndexedDB hat einen viel größeren Speicherplatz als LocalStorage, in der Regel nicht weniger als 250 MB, und es gibt kein oberes Limit.
(6) Unterstützung von binärer Speicherung. IndexedDB kann nicht nur Strings, sondern auch Binärdaten (ArrayBuffer-Objekte und Blob-Objekte) speichern.
Wenn es schwierig ist, direkt mit IndexedDB zu starten, und Sie es selbst kapseln müssen, können Sie einige Pakete verwenden, wie folgt:
- localForage: Ein einfacher Polyfill, der eine einfache Wertsyntax für clientseitige Datenspeicher bereitstellt. Im Hintergrund verwendet es IndexedDB und greift in Browsern, die IndexedDB nicht unterstützen, auf WebSQL oder localStorage zurück.
- Dexie.js: Die Wrapper von IndexedDB ermöglichen eine schnellere Codeentwicklung durch einfache Syntax.
- ZangoDB: Eine IndexedDB-Schnittstelle ähnlich MongoDB, die die meisten der bekannten Filter-, Projektions-, Sortier-, Aktualisierungs- und Aggregationsfunktionen von MongoDB unterstützt.
- JsStore: Ein IndexedDB-Wrapper mit SQL-Syntax.
- MiniMongo: MongoDB im Client-Speicher, unterstützt von Localstorage, Server-Synchronisation über HTTP. MeteorJS verwendet MiniMongo.
- PouchDB: Ein Client, der CouchDB im Browser mit IndexedDB implementiert.
- idb: Eine winzige (〜1.15k) Bibliothek mit dem Großteil der API ähnlich wie IndexedDB, aber mit einigen kleinen Verbesserungen, die die Benutzerfreundlichkeit der Datenbank erheblich verbessern.
- idb-keyval: Super einfache und kleine (~600B) versprechensbasierte Schlüssel-Wert-Paare-Speicherung, implementiert mit IndexedDB.
- sifrr-storage: Eine sehr kleine (~2 kB) versprechensbasierte clientseitige Key-Value-Datenbank. Implementierung basierend auf IndexedDB, localStorage, WebSQL und Cookies. Es kann automatisch die oben genannten unterstützten Datenbanken auswählen und sie nach Priorität verwenden.
- lovefield: Lovefield ist eine relationale Datenbank für Webanwendungen, geschrieben in JavaScript, kann in verschiedenen Browserumgebungen ausgeführt werden und bietet eine SQL-ähnliche API, die schnell, sicher und einfach zu bedienen ist.
localForage
localForage ist ein schnelles und einfaches JavaScript-Repository. localForage verbessert das Offline-Erlebnis von Webanwendungen durch asynchronen Speicher (IndexedDB oder WebSQL) und eine einfache API ähnlich localStorage. localForage verwendet localStorage in Browsern, die keine IndexedDB- oder WebSQL-Unterstützung haben.
GitHub-Adresse:Der Hyperlink-Login ist sichtbar.
Chinesisches Tutorial:Der Hyperlink-Login ist sichtbar.
localForage stellt zwei verschiedene js-Dateien bereit, deren Unterschiede wie folgt sind:
localforage.js: eine Promise-Bibliothek, die die Lie-Implementierung enthält (Der Hyperlink-Login ist sichtbar.), ist die Datei relativ groß, und die Promise-Syntax kann in älteren Browsern verwendet werden.
localforage.nopromises.js: Es gibt keine Implementierung von Promise, nur neue Versionen von Browsern werden unterstützt.
Testcode:
(Ende)
|
Veröffentlicht am 12.10.2023 20:42:27
|
|
|
|
Vermieter|
Veröffentlicht am 02.03.2025 19:12:18
|
