Jak wyświetlić lub edytować localStorage

259

Utworzyłem rozszerzenie Chrome i używam localStorage do przechowywania danych.

Uzyskuję dostęp do localStorage poprzez „background_page”.

Działa dobrze, ale jak mogę ręcznie wyświetlić jego wartości? W przeglądarce Firefox możesz używać Firebug.

Czy ktoś ma jakieś sugestie?

google-chrome local-storage Joe Doe
źródło

Odpowiedzi:

270

To proste. Wystarczy przejść do narzędzi dla programistów, naciskając F12, a następnie przejść do karty Aplikacja . W sekcji Magazyn rozwiń Magazyn lokalny . Następnie zobaczysz tam całą lokalną pamięć przeglądarki.

Giorgi Gzirishvili
źródło
33
W Chrome w wersji 60 nie możesz modyfikować ani dodawać nowych elementów, musisz to zrobić za pomocą konsoli ilocalStorage.setItem('key', 'value')
Jim Aho
9
W wersji Chrome 65 możesz ręcznie modyfikować i dodawać nowe elementy. Kliknij dwukrotnie poniżej ostatniej pary klucz-wartość na liście klucz-wartość w opcji Aplikacja> Pamięć lokalna, aby dodać nową wartość.
Rose Perrone
169

Po prostu otwórz Narzędzia programistyczne , naciskając F12.

Kliknij kartę Aplikacja (dawniej Zasoby), a zobaczysz zawartość localStorage. Stamtąd możesz ręcznie dodawać / edytować / usuwać wpisy klucza / wartości.

karta zasobów localStorage

W systemie OS X klucze to: ⌥+ ⌘+i

Inna kombinacja: Ctrl+ Shift+i

EDYCJA: w Chrome 56 wygląda to tak:

wprowadź opis zdjęcia tutaj

Simone
źródło
4
Tak, już próbowałem, ale localStorage jest pusty. Może dlatego, że załadowałem rozpakowane rozszerzenie?
Joe Doe
Może ci to pomóc: stackoverflow.com/questions/3598669/...
Simone
3
Po prostu wiem, jak ustawić i czytać localStorage w JS, ale muszę go ręcznie edytować / usunąć
Joe Doe
Nie trzeba tego robić za pomocą JS, możliwe jest dodawanie / edycja / usuwanie wpisów z interfejsu użytkownika
Simone
17

Obecnie używam Chrome w wersji 52.0.2743.82 m. W tej najnowszej wersji Chrome, jak na razie, możesz zobaczyć lokalne wartości pamięci, uruchamiając „Narzędzia programistyczne”, a następnie przeglądając zakładkę „Aplikacja”.

Luke P. Issac
źródło
15

Możesz przejść do chrome: // chrome / extensions, a do strony w tle będzie link, który po uruchomieniu możesz użyć Narzędzi programistycznych, aby zobaczyć zawartość localStorage.

Ryan S.
źródło
Dzięki za odpowiedź @ Ryan S, ale localStorage jest pusty Ustawiłem taklocalStorage['xy'] = JSON.stringify(xy);
Joe Doe
2
W chromowanej konsoli możesz to zrobić, localStorage.setItem('xy', JSON.stringify(xy))a to ustawi element w localStorage
Ryan S
2
do chrome: // chrome-urls /, a następnie lokalne przechowywanie
khaled_webdev
2

Albo nie rozumiem, co ludzie tutaj robią, i nie robię tego, i / lub narzędzia programistyczne Chrome zmieniły się i są pod tym względem zepsute.

Skrypt treści mojego rozszerzenia przechowuje takie dane:

chrome.storage.local.set(packet);

Gdy przeglądam kartę Aplikacja na stronie tła rozszerzenia i rozwijam Pamięć> Pamięć lokalna, widzę moje rozszerzenie na liście, ale kliknięcie go nie pokazuje danych.

Jedynym rozwiązaniem, jakie znalazłem, jest uruchomienie tego w konsoli strony w tle:

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

Jest to podobne do sposobu, w jaki rozszerzenie to odczytuje (oprócz podania wartości null, aby uzyskać wszystkie klucze zamiast nazwy klucza, aby uzyskać tylko ten, którego chcę) i działa dobrze, po prostu dziwne jest wpisywanie go za każdym razem. Dziwne jest również to, że są tutaj wszystkie te odpowiedzi, które nie działają dla mnie.

Używam Chrome 73.0.3683.103 (oficjalna wersja) (64-bitowy) w systemie Windows 10. Rozszerzenie jest nadal rozpakowane, jeśli jest to istotne, ale jest to najbardziej prawdopodobny czas, gdy chcesz to zrobić, tj. W fazie rozwoju.

enigment
źródło