Anzeigen oder Bearbeiten von localStorage

259

Ich habe eine Chrome-Erweiterung erstellt und verwende localStorage zum Speichern von Daten.

Ich greife über "background_page" auf localStorage zu.

Es funktioniert gut, aber wie kann ich seine Werte manuell anzeigen? In Firefox können Sie Firebug verwenden.

Hat jemand irgendwelche Vorschläge?

google-chrome local-storage Joe Doe
quelle

Antworten:

270

Es ist einfach. Gehen Sie einfach zu den Entwicklertools, indem Sie auf klicken F12, und wechseln Sie dann zur Registerkarte Anwendung . Erweitern Sie im Abschnitt Speicher die Option Lokaler Speicher . Danach sehen Sie dort den gesamten lokalen Speicher Ihres Browsers.

Giorgi Gzirishvili
quelle
33
In Chrome Version 60 können Sie keine neuen Elemente ändern oder hinzufügen. Sie müssen dies über die Konsole tun undlocalStorage.setItem('key', 'value')
Jim Aho
9
In Chrome Version 65 können Sie Elemente manuell ändern und hinzufügen. Doppelklicken Sie unter dem letzten Schlüssel-Wert-Paar in der Schlüssel-Wert-Liste unter Anwendung> Lokaler Speicher, um einen neuen Wert hinzuzufügen.
Rose Perrone
169

Öffnen Sie einfach die Entwicklertools durch Drücken von F12.

Klicken Sie auf die Registerkarte Anwendung (früher Ressourcen), um den Inhalt von localStorage anzuzeigen. Von dort aus können Sie die Schlüssel- / Werteinträge manuell hinzufügen / bearbeiten / löschen.

Registerkarte localStorage-Ressourcen

Unter OS X lauten die Tasten: ⌥+ ⌘+i

Eine andere Kombination: Ctrl+ Shift+i

BEARBEITEN: In Chrome 56 sieht es so aus:

Geben Sie hier die Bildbeschreibung ein

Simone
quelle
4
Yep hat das schon versucht, aber localStorage ist leer. Vielleicht, weil ich die ausgepackte Erweiterung geladen habe?
Joe Doe
Dies kann Ihnen helfen: stackoverflow.com/questions/3598669/…
Simone
3
Simone, ich weiß, wie man localStorage mit JS einstellt und liest, aber ich muss es manuell bearbeiten / löschen
Joe Doe
Keine Notwendigkeit, es mit JS zu tun, es ist möglich, Einträge von der Benutzeroberfläche hinzuzufügen / zu bearbeiten / zu löschen
Simone
17

Ich verwende derzeit Chrome Version 52.0.2743.82 m. In dieser neuesten Version von Chrome können Sie die lokalen Speicherwerte anzeigen, indem Sie "Developer Tools" starten und dann auf die Registerkarte "Application" schauen.

Luke P. Issac
quelle
15

Sie können zu chrome: // chrome / extensions gehen und es wird ein Link zu Ihrer Hintergrundseite angezeigt, über den Sie nach dem Start die Dev Tools verwenden können, um die localStorage-Inhalte anzuzeigen.

Ryan S.
quelle
Vielen Dank für die Antwort @Ryan S, aber localStorage ist leer. Ich habe es so eingestelltlocalStorage['xy'] = JSON.stringify(xy);
Joe Doe
2
In der Chrome-Konsole können Sie tun, localStorage.setItem('xy', JSON.stringify(xy))und das wird das Element in localStorage
Ryan S
2
do chrome: // chrome-urls /, dann lokaler Speicher
khaled_webdev
2

Entweder verstehe ich nicht, was die Leute hier versuchen, und es ist nicht das, was ich tue, und / oder die Chrome-Entwicklertools haben sich geändert und sind in dieser Hinsicht kaputt.

Das Inhaltsskript meiner Erweiterung speichert Daten wie folgt:

chrome.storage.local.set(packet);

Wenn ich die Registerkarte Anwendung auf der Hintergrundseite der Erweiterung ansehe und Speicher> Lokaler Speicher erweitern, wird meine Erweiterung aufgelistet, aber wenn ich darauf klicke, werden keine Daten angezeigt.

Die einzige Lösung, die ich gefunden habe, besteht darin, dies in der Konsole der Hintergrundseite auszuführen:

chrome.storage.local.get(null, function(data) {console.log(data);})

Das ist ähnlich wie die Erweiterung es liest (außer dass Null übergeben wird, um alle Schlüssel anstelle eines Schlüsselnamens zu erhalten, um nur den gewünschten zu erhalten) und es funktioniert einwandfrei. Es ist nur umständlich, es jedes Mal abzutippen. Es ist auch seltsam, dass es hier all diese Antworten gibt, die für mich nicht funktionieren.

Ich verwende Chrome 73.0.3683.103 (Official Build) (64-Bit) unter Windows 10. Die Erweiterung ist noch entpackt, wenn dies relevant ist, aber dies ist die wahrscheinlichste Zeit, die Sie dies tun möchten, dh in der Entwicklung.

Enigment
quelle