Ein Leitfaden für Einsteiger zu IndexedDB

Ein Tutorial zur Verwendung von clientseitigem Speicher in Web-Apps

Beim Erstellen moderner Webanwendungen, insbesondere progressiver Web-Apps (PWAs), ist es von entscheidender Bedeutung, eine Möglichkeit zum Offline-Speichern von Daten zu haben. IndexedDB ist eine leistungsstarke clientseitige Datenbank, die es Web-Apps ermöglicht, Daten zu speichern und abzurufen, auch wenn der Benutzer offline ist. Dieser Leitfaden führt Sie durch die Grundlagen von IndexedDB und zeigt Ihnen, wie Sie Daten (CRUD-Operationen) in Ihrer Web-App erstellen, lesen, aktualisieren und löschen.

Was ist IndexedDB?

IndexedDB ist eine Low-Level-API für die clientseitige Speicherung großer Mengen strukturierter Daten, einschließlich Dateien und Blobs. Im Gegensatz zu localStorage können Sie mit IndexedDB komplexe Datentypen und nicht nur Zeichenfolgen speichern. Es verwendet ein asynchrones, transaktionales Datenbankmodell, was es leistungsstark für Anwendungen macht, die große Datensätze oder Offline-Datensynchronisierung verarbeiten müssen.

Warum IndexedDB verwenden?

• Offline-Funktionen: Ideal für Progressive Web Apps (PWAs) und Offline-First-Anwendungen.
• Speicherkapazität: IndexedDB kann weit mehr Daten speichern als localStorage (das auf etwa 5–10 MB begrenzt ist).
• Flexibilität:Speichern Sie komplexe Objekte wie Arrays, Objekte und sogar Blobs.
• Asynchron: Vorgänge blockieren den UI-Thread nicht, was bedeutet, dass Ihre App weiterhin reagiert.

Erste Schritte: Einrichten von IndexedDB

Lassen Sie uns in die Kernschritte für die Arbeit mit IndexedDB eintauchen. Wir werden Folgendes behandeln:

• Erstellen oder Öffnen einer Datenbank
• Objektspeicher (Tabellen) erstellen
• Daten hinzufügen
• Daten lesen
• Daten aktualisieren
• Daten löschen

Schritt 1: Öffnen einer Datenbank

Um mit IndexedDB zu interagieren, müssen Sie zunächst eine Verbindung zur Datenbank herstellen. Wenn die Datenbank nicht existiert, wird sie erstellt.

const request = indexedDB.open('MyCustomersDatabase', 1);

request.onerror = (event) => {
    console.error('Database error:', event.target.errorCode);
};

request.onsuccess = (event) => {
    const db = event.target.result;
    console.log('Database opened successfully', db);
};

request.onupgradeneeded = (event) => {
    const db = event.target.result;
    if (!db.objectStoreNames.contains('customers')) {
        const objectStore = db.createObjectStore('customers', { keyPath: 'id' });
        objectStore.createIndex('name', 'name', { unique: false });
        objectStore.createIndex('email', 'email', { unique: true });
        console.log('Object store created.');
    }
};

Hier ist, was passiert:

• indexedDB.open öffnet oder erstellt die Datenbank.
• onerror behandelt alle Fehler beim Öffnen der Datenbank.
• onsuccess wird ausgelöst, wenn die Datenbankverbindung erfolgreich geöffnet wurde.
• onupgradeneeded wird ausgelöst, wenn die Datenbank aktualisiert werden muss (z. B. wenn die Datenbank zum ersten Mal geöffnet wird oder wenn sich die Version ändert). Hier definieren Sie Ihre Objektspeicher (stellen Sie sich diese als Tabellen in SQL vor).

Schritt 2: Daten zu IndexedDB hinzufügen

Da wir nun unsere Datenbank und unseren Objektspeicher eingerichtet haben, fügen wir einige Daten hinzu.

const addCustomer = (db, customer) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.add(customer);

    request.onsuccess = () => {
        console.log('Customer added:', customer);
    };

    request.onerror = (event) => {
        console.error('Error adding customer:', event.target.errorCode);
    };
}

const customer = { id: 1, name: 'John Doe', email: 'john@example.com' };

request.onsuccess = (event) => {
    const db = event.target.result;
    addCustomer(db, customer);
};

Hier ist, was passiert:

• Wir erstellen eine Transaktion mit Lese-/Schreibzugriff, um Änderungen zu ermöglichen.
• Die Methode add() wird verwendet, um Daten in den Objektspeicher einzufügen.
• Wir achten auf Erfolgs- und Fehlerereignisse, um zu bestätigen, ob die Daten erfolgreich hinzugefügt wurden.

Schritt 3: Daten aus IndexedDB lesen

Das Lesen von Daten aus IndexedDB ist ebenfalls unkompliziert. Rufen wir den Kunden ab, den wir gerade hinzugefügt haben, indem wir die Methode get() verwenden.

const getCustomer = (db, id) => {
    const transaction = db.transaction(['customers'], 'readonly');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.get(id);

    request.onsuccess = (event) => {
        const customer = event.target.result;
        if (customer) {
            console.log('Customer found:', customer);
        } else {
            console.log('Customer not found.');
        }
    };

    request.onerror = (event) => {
        console.error('Error fetching customer:', event.target.errorCode);
    };
}

request.onsuccess = (event) => {
    const db = event.target.result;
    getCustomer(db, 1); // Fetch customer with ID 1
};

Schritt 4: Daten in IndexedDB aktualisieren

Um einen vorhandenen Datensatz zu aktualisieren, können wir die Methode put() verwenden, die ähnlich wie add() funktioniert, aber den Datensatz ersetzt, wenn der Schlüssel bereits vorhanden ist.

const updateCustomer = (db, customer) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.put(customer);

    request.onsuccess = () => {
        console.log('Customer updated:', customer);
    };

    request.onerror = (event) => {
        console.error('Error updating customer:', event.target.errorCode);
    };
}

const updatedCustomer = { id: 1, name: 'Jane Doe', email: 'jane@example.com' };

request.onsuccess = (event) => {
    const db = event.target.result;
    updateCustomer(db, updatedCustomer);
};

Schritt 5: Daten aus IndexedDB löschen

Um schließlich einen Datensatz zu löschen, verwenden Sie die Methode delete().

const deleteCustomer = (db, id) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.delete(id);

    request.onsuccess = () => {
        console.log('Customer deleted.');
    };

    request.onerror = (event) => {
        console.error('Error deleting customer:', event.target.errorCode);
    };
}

request.onsuccess = (event) => {
    const db = event.target.result;
    deleteCustomer(db, 1); // Delete customer with ID 1
};

Abschluss

IndexedDB ist eine robuste Lösung für die Handhabung der clientseitigen Datenspeicherung, insbesondere in Offline-First-Webanwendungen. Indem Sie dieser Anleitung folgen, haben Sie Folgendes gelernt:

• Öffnen und erstellen Sie eine Datenbank
• Objektspeicher erstellen
• Daten hinzufügen, lesen, aktualisieren und löschen

Mit IndexedDB können Sie robustere Webanwendungen erstellen, die Daten lokal speichern und auch ohne Internetverbindung funktionieren.

Referenzen:

1. MDN Web Docs – IndexedDB API
   
   Eine umfassende Anleitung zur Funktionsweise von IndexedDB, seinen API-Methoden und Anwendungsfällen.
   
   MDN IndexedDB-Leitfaden

2. Google Developers – IndexedDB
   
   Ein ausführlicher Artikel über Best Practices und die Verwendung von IndexedDB zum Erstellen offlinefähiger Web-Apps.
   
   Google Developers – IndexedDB

3. W3C Indexed Database API
   
   Die offizielle Spezifikation des W3C, die die technische Implementierung und Struktur von IndexedDB beschreibt.
   
   W3C IndexedDB Spec

Diese Ressourcen bieten zusätzliche Tiefe und Kontext, wenn Sie über dieses Tutorial hinaus mehr über IndexedDB erfahren möchten!

Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonEin Leitfaden für Einsteiger zu IndexedDB. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!