Anzeigen und Ändern von IndexedDB-Daten

Artikel
11/07/2024

Verwenden Sie das Anwendungstool, um IndexedDB-Daten anzuzeigen und zu ändern.

Anzeigen von IndexedDB-Daten

Öffnen Sie eine Webseite, die IndexedDB verwendet, in einem neuen Fenster oder einer neuen Registerkarte. Sie können die PWAmp-Demoanwendung verwenden.
Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Überprüfen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.
Wählen Sie in DevTools auf der Aktivitätsleiste die Registerkarte Anwendung aus. Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Tools ().

Der Bereich Manifest wird in der Regel standardmäßig geöffnet:
Erweitern Sie auf der Randleiste unter Speicher das Menü IndexedDB , um anzuzeigen, welche Datenbanken verfügbar sind:
- () keyval-store stellt eine Datenbank dar.
- () keyval ist ein Objektspeicher in der Datenbank.
Wählen Sie die keyval-store Datenbank aus, um den Ursprung, die Versionsnummer und andere Informationen zur Datenbank anzuzeigen:
Klicken Sie auf den keyval Objektspeicher, um die Schlüssel-Wert-Paare anzuzeigen:

Anmerkung: IndexedDB-Daten werden nicht in Echtzeit aktualisiert. Wenn veraltete Daten in einem Objektspeicher angezeigt werden, aktualisieren Sie die Objektspeicheransicht. Weitere Informationen finden Sie unter Aktualisieren von IndexedDB-Daten.
Klicken Sie in der Spalte Wert auf eine Zelle, um den Wert zu erweitern:

Aktualisieren von IndexedDB-Daten

IndexedDB-Werte im Anwendungstool werden nicht in Echtzeit aktualisiert.

Um die Daten zu aktualisieren, zeigen Sie einen Objektspeicher an, und klicken Sie dann auf die Schaltfläche Aktualisieren ().
Um alle Daten in einer IndexedDB-Datenbank zu aktualisieren, zeigen Sie eine Datenbank an, und klicken Sie dann auf Datenbank aktualisieren:

Bearbeiten von IndexedDB-Daten

IndexedDB-Schlüssel und -Werte können nicht über das Anwendungstool bearbeitet werden. Da DevTools jedoch Zugriff auf den Seitenkontext hat, können Sie JavaScript-Code in DevTools ausführen, um die in einer IndexedDB-Datenbank gespeicherten Daten zu bearbeiten.

Bearbeiten von IndexedDB-Daten mithilfe des Konsolentools

Wählen Sie in DevTools auf der Aktivitätsleiste die Registerkarte Konsole aus.

Führen Sie im Konsolentool JavaScript-Code aus, um die IndexedDB-Daten zu bearbeiten. Führen Sie beispielsweise den folgenden Code aus, um dem keyval Objektspeicher einen neuen Wert hinzuzufügen:

let connection = indexedDB.open("keyval-store", 1);

connection.onsuccess = e => {
  const database = e.target.result;
  const transaction = database.transaction("keyval", "readwrite");
  const objectStore = transaction.objectStore("keyval");
  const request = objectStore.add({foo: "bar"}, "new-key");
  request.onsuccess = e => {
    console.log(e.target.result);
  }
}

Bearbeiten von IndexedDB-Daten mithilfe von Codeausschnitten

Codeausschnitte sind eine Möglichkeit, JavaScript-Code wiederholt in DevTools zu speichern und auszuführen. Wenn Sie IndexedDB-Daten häufig bearbeiten müssen, speichern Sie sie in einem neuen Codeausschnitt, und führen Sie dann den Codeausschnitt aus. Weitere Informationen finden Sie unter Ausführen von JavaScript-Codeausschnitten auf einer beliebigen Webseite.

Verwenden eines Codeausschnitts für die Interaktion mit IndexedDB

Löschen von IndexedDB-Daten

Sie können eine der folgenden Optionen löschen:

Ein IndexedDB-Schlüssel-Wert-Paar.
Alle Schlüssel-Wert-Paare in einem Objektspeicher.
Eine IndexedDB-Datenbank.
Sämtlicher IndexedDB-Speicher.

Diese Optionen werden unten beschrieben.

Löschen eines IndexedDB-Schlüssel-Wert-Paars

Anzeigen eines IndexedDB-Objektspeichers.
Klicken Sie auf das Schlüssel-Wert-Paar, das Sie löschen möchten. DevTools hebt das Schlüssel-Wert-Paar hervor, um anzugeben, dass es ausgewählt ist:
Drücken Sie Delete, oder klicken Sie auf die Schaltfläche Ausgewählte löschen ('):

Löschen aller Schlüssel-Wert-Paare in einem Objektspeicher

Anzeigen eines IndexedDB-Objektspeichers.
Klicken Sie auf die Schaltfläche Objektspeicher löschen ().

Löschen einer IndexedDB-Datenbank

Zeigen Sie die IndexedDB-Datenbank an, die Sie löschen möchten.
Klicken Sie auf Datenbank löschen.

Löschen des gesamten IndexedDB-Speichers

Klicken Sie auf der Randleiste des Anwendungstools auf Speicher.
Scrollen Sie nach unten zu den Kontrollkästchen Speicher , und stellen Sie sicher, dass das Kontrollkästchen IndexedDB aktiviert ist.
Klicken Sie auf die Schaltfläche Websitedaten löschen .

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die originale Seite finden Sie hier und wird von Kayce Basques geschrieben.

Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.

Freigeben über