So speichern Sie unbegrenzte* Daten im Browser mit IndexedDB

In diesem Artikel wird IndexedDB untersucht, eine robuste Browser-API für clientseitige Datenspeicher, die die Kapazität alternativer Methoden überschreitet. Client-Seite-Datenspeicheroptionen haben sich erheblich erweitert und Alternativen zu serverbasierten Datenbankaktualisierungen angeboten.

Schlüsselvorteile von indexedDB:

• hohe Speicherkapazität: IndexedDB bietet wesentlich mehr Speicherplatz als andere clientseitige Optionen und bietet möglicherweise mindestens 1 GB und bis zu 60% des verfügbaren Speicherplatzes pro Domäne.
• asynchrone Operationen: Die asynchrone Natur ermöglicht die Verarbeitung von Hintergrund, ohne andere Skripte zu blockieren, ideal für große Datensätze.
• umfassende CRUD -Operationen: unterstützt das Erstellen, Lesen, Aktualisieren und Löschen von Datensätzen (CRUD) sowie Datenbankversion und Schemaverwaltung.
.
• Datenintegrität: Verwaltet die Datenintegrität durch Transaktionen, um sicherzustellen, dass alle Vorgänge erfolgreich sind oder zusammen scheitern.
• Schlüsselbasierte Datenzugriff: Daten befinden sich in Objektspeichern, wobei Datensätze von Tasten identifiziert wurden.
• Browser Devtools Integration: Debugging und Management werden durch Browser Devtools erleichtert, wobei die Datenuntersuchung, Änderung und Löschen aktiviert werden.
• Bibliotheksunterstützung: Obwohl sie nicht nativ moderne JavaScript -Funktionen wie Versprechen und Async/Atert unterstützen, überbrücken Bibliotheken idb diese Lücke.

Warum wählen Sie Client-Side-Speicher?

Während der serverseitige Speicher für die meisten Benutzerdaten geeignet ist, ist der clientseitige Speicher für:

vorteilhaft

• Gerätespezifische Einstellungen: UI-Einstellungen, hell/dunkler Modus usw.
• Ephemerale Daten: Temporäre Daten wie Fotos vor dem Hochladen.
• Offline-Datensynchronisation: Daten zur späteren Synchronisierung in Bereichen mit niedriger Konnektivität.
• Progressive Web -Apps (PWAS): Offline -Funktionalität aus Usability- oder Datenschutzgründen.
• Asset Caching: Verbesserte Leistung durch Caching.

Vergleich von Browserspeicher -APIs:

1. Webspeicher: Einfache, synchroner Name-Wert-Paarspeicher. Geeignet für kleine, nicht kritische Daten (5 MB pro Domäne).
2. Cache -API: speichert HTTP -Anforderungs-/Antwortpaare, die hauptsächlich von Service -Mitarbeitern für PWA -Caching verwendet werden (Speicher variiert je nach Browser).
3. IndexedDB: Eine clientseitige NoSQL-Datenbank für Daten, Dateien und Blobs (mindestens 1 GB pro Domäne, möglicherweise bis zu 60% des verfügbaren Speicherplatzes).

IndexedDB Fundamentals:

IndexedDB, standardisiert im Jahr 2015 (API 2.0 im Jahr 2018, API 3.0 in der Entwicklung), genießt eine breite Browser -Unterstützung. Dieser Artikel konzentriert sich auf Kernkonzepte:

• Datenbank: Der Container der obersten Ebene. Der Zugang ist auf dieselbe Domäne beschränkt.
• Objektspeicher: Ein Name/Wertspeicher für verwandte Daten (wie Sammlungen in MongoDB oder Tabellen in SQL).
• Schlüssel: Eine eindeutige Kennung für jeden Datensatz in einem Objektspeicher (kann automatisch generiert oder benutzerdefiniert werden).
• autoIncrement: erhöht die Schlüsselwerte nach Datensatzaddition automatisch.
• Index: organisiert Daten in einem Objektspeicher für eine effiziente Suche.
• Schema: definiert Objektspeicher, Tasten und Indizes.
• Version: Eine Ganzzahl für Schema -Updates.
• Betrieb: Eine Datenbankaktion (CRUD).
• Transaktion: Umschläge Vorgänge, um die Datenintegrität (alle oder nichts) zu gewährleisten.
• Cursor: iteriert effizient Aufzeichnungen, wobei das Laden alles in Speicher vermieden wird.
• Asynchrone Ausführung: Vorgänge werden asynchron ausgeführt, sodass andere Code die Ausführung fortsetzen können.

Beispieldatenstruktur (Hinweis Datensätze):

{
  id: 1,
  title: "My first note",
  body: "A note about something",
  date: <date object>,
  tags: ["#first", "#note"]
}

IndexedDB verwendet Ereignisse und Rückrufe, fehlt native Versprechen und asynchron/warteten Unterstützung (obwohl Bibliotheken dies idb vorstellen).

.

Debugging mit Devtools:

Browser devtools (Anwendungs-Registerkarte in Chrombasis, Speicher in Firefox) sind für die Untersuchung, Änderung und Löschen von IndexedDB-Daten von unschätzbarem Wert.

prüfen IndexedDB -Unterstützung und Speicherplatz:

if ('indexedDB' in window) {
  // IndexedDB supported
} else {
  console.log('IndexedDB is not supported.');
}

(async () => {
  if (!navigator.storage) return;
  const estimate = await navigator.storage.estimate();
  const available = Math.floor((estimate.quota - estimate.usage) / 1024 / 1024);
  // Check available space and proceed accordingly
})();

Öffnen einer indexedDB -Verbindung:

const dbOpen = indexedDB.open('notebook', 1);

dbOpen.onupgradeneeded = event => {
  const db = dbOpen.result;
  // Create object stores and indexes here
};

dbOpen.onerror = err => {
  console.error(`indexedDB error: ${err.errorCode}`);
};

dbOpen.onsuccess = () => {
  const db = dbOpen.result;
  // Use the db connection for further operations
};

(nachfolgende Abschnitte, in denen CRUD -Operationen, Schema -Updates und Cursorverbrauch beschrieben werden, werden für die Kürze weggelassen. Die ursprüngliche Antwort liefert jedoch umfassende Beispiele.)

häufig gestellte Fragen (FAQs):

Die ursprüngliche Antwort umfasst einen umfassenden FAQ -Abschnitt, der die maximale Speichergröße, die Behandlung großer Datensätze, Überschreitungsgrenze, Speichergrenze, Nutzungsüberprüfung, Datenpersistenz, Speicher von BloB -Objekten, Sicherheit, Nutzung von Arbeitern und Fehlerbehandlung, die Verhandlung von Datensätzen, Speichergrenze und Fehlerbehandlung umfasst. Diese werden alle im ursprünglichen Ausgang ausführlich behandelt.

Das obige ist der detaillierte Inhalt vonSo speichern Sie unbegrenzte* Daten im Browser mit IndexedDB. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!