IndexedDB-Daten ansehen und ändern

Kayce Basques
Kayce Basques

In diesem Leitfaden erfahren Sie, wie Sie mit den Chrome-Entwicklertools IndexedDB-Daten ansehen und ändern können. Es wird davon ausgegangen, dass Sie mit den Entwicklertools vertraut sind. Falls nicht, lesen Sie den Abschnitt Erste Schritte. Außerdem wird davon ausgegangen, dass Sie mit IndexedDB vertraut sind. Falls nicht, lesen Sie den Artikel Using IndexedDB (IndexedDB verwenden).

IndexedDB-Daten ansehen

  1. Klicken Sie auf den Tab Anwendung, um den Bereich Anwendung zu öffnen. Maximieren Sie das Menü IndexedDB, um zu sehen, welche Datenbanken verfügbar sind.

    Das IndexedDB-Menü

    Abbildung 1. Das Menü IndexedDB

    • Symbol: Datenbank notes - https://mdn.github.io steht für eine Datenbank, wobei notes der Name der Datenbank und https://mdn.github.io der Ursprung ist, der auf die Datenbank zugreifen kann.
    • Symbol für Objektspeicher notes ist ein Objektspeicher.
    • title und body sind Indexe.
  1. Klicken Sie auf eine Datenbank, um ihren Ursprung und ihre Versionsnummer zu sehen.

    Die Datenbank „notes“

    Abbildung 2. Die Datenbank notes

  2. Klicken Sie auf einen Objektspeicher, um die zugehörigen Schlüssel/Wert-Paare aufzurufen.

    Der Objektspeicher „notes“

    Abbildung 3. Der Objektspeicher notes

    • Einträge insgesamt ist die Gesamtzahl der Schlüssel/Wert-Paare im Objektspeicher.
    • Schlüsselgeneratorwert ist der nächste verfügbare Schlüssel. Dieses Feld wird nur angezeigt, wenn Schlüsselgeneratoren verwendet werden.
  3. Klicken Sie auf eine Zelle in der Spalte Wert, um den Wert zu maximieren.

    IndexedDB-Wert ansehen

    Abbildung 4. IndexedDB-Wert ansehen

  4. Klicken Sie auf einen Index, z. B. title oder body in Abbildung 6 unten, um den Objektspeicher nach den Werten dieses Index zu sortieren.

    Objektspeicher nach einem Index sortieren

    Abbildung 5. Ein Objektspeicher, der alphabetisch nach dem Schlüssel title sortiert ist

IndexedDB-Daten aktualisieren

IndexedDB-Werte im Bereich Anwendung werden nicht in Echtzeit aktualisiert. Klicken Sie beim Aufrufen eines Objektspeichers auf Aktualisieren Aktualisieren, um die Daten zu aktualisieren, oder rufen Sie eine Datenbank auf und klicken Sie auf Datenbank aktualisieren, um alle Daten zu aktualisieren.

Datenbank ansehen

Abbildung 6. Datenbank ansehen

IndexedDB-Daten bearbeiten

IndexedDB-Schlüssel und -Werte können nicht im Bereich Anwendung bearbeitet werden. Da die Entwicklertools jedoch Zugriff auf den Seitenkontext haben, können Sie in den Entwicklertools JavaScript-Code ausführen, mit dem IndexedDB-Daten bearbeitet werden.

IndexedDB-Daten mit Snippets bearbeiten

Snippets sind eine Möglichkeit, JavaScript-Codeblöcke in den Entwicklertools zu speichern und auszuführen. Wenn Sie ein Snippet ausführen, wird das Ergebnis in der Console protokolliert. Mit einem Snippet können Sie JavaScript-Code ausführen, der eine IndexedDB-Datenbank bearbeitet.

Snippet für die Interaktion mit IndexedDB verwenden

Abbildung 7. Snippet für die Interaktion mit IndexedDB verwenden

IndexedDB-Daten löschen

IndexedDB-Schlüssel/Wert-Paar löschen

  1. IndexedDB-Objektspeicher ansehen
  2. Klicken Sie auf das Schlüssel/Wert-Paar, das Sie löschen möchten. In den DevTools wird es blau hervorgehoben, um anzuzeigen, dass es ausgewählt ist.

    Schlüssel/Wert-Paar zum Löschen auswählen

    Abbildung 8. Schlüssel/Wert-Paar zum Löschen auswählen

  3. Drücken Sie die Taste Entf oder klicken Sie auf Auswahl löschen Auswahl löschen.

    So sieht der Objektspeicher aus, nachdem das Schlüssel/Wert-Paar gelöscht wurde

    Abbildung 9. So sieht der Objektspeicher aus, nachdem das Schlüssel/Wert-Paar gelöscht wurde

Alle Schlüssel/Wert-Paare in einem Objektspeicher löschen

  1. IndexedDB-Objektspeicher ansehen

    Objektspeicher ansehen

    Abbildung 10. Objektspeicher ansehen

  2. Klicken Sie auf Objektspeicher löschen Objektspeicher leeren.

IndexedDB-Datenbank löschen

  1. Rufen Sie die IndexedDB-Datenbank auf, die Sie löschen möchten.
  2. Klicken Sie auf Datenbank löschen.

    Schaltfläche „Datenbank löschen“

    Abbildung 11. Schaltfläche Datenbank löschen

Gesamten IndexedDB-Speicher löschen

  1. Öffnen Sie den Bereich Speicherplatz freigeben.
  2. Das Kästchen IndexedDB muss aktiviert sein.
  3. Klicken Sie auf Websitedaten löschen.

    Bereich „Speicherinhalt löschen“

    Abbildung 12. Bereich Speicherinhalt löschen