Edytor Local Storage zapewnia czysty interfejs tabeli do zarządzania wpisami localStorage i sessionStorage dla bieżącej witryny. Przeglądaj wszystkie pary klucz-wartość, edytuj wartości na miejscu, dodawaj nowe wpisy i usuwaj te, których nie potrzebujesz. Wartości JSON są automatycznie wykrywane i formatowane dla łatwego czytania. Przełączaj między kartami localStorage i sessionStorage, aby zarządzać oboma typami magazynu.
Aplikacje webowe przechowują ogromne ilości stanu w localStorage i sessionStorage — preferencje użytkowników, tokeny autentykacji, flagi funkcji, przypisania testów A/B, zawartość koszyka, szkice formularzy, buforowane odpowiedzi API i stan UI. Debugowanie tych wartości w Chrome DevTools wymaga nawigowania do zakładki Application, znalezienia sekcji Storage i używania podstawowego widoku klucz-wartość z ograniczonymi możliwościami edycji. Edytor Local Storage wnosi to do specjalnie zaprojektowanego panelu z przełączaniem magazynu z kartami, edycją na miejscu, automatycznym formatowaniem JSON i operacjami zbiorczymi. Tabela pokazuje każdą parę klucz-wartość z nazwą klucza i wartością. Wartości JSON (które są niezwykle powszechne — obiekty serializowane z JSON.stringify) są wykrywane automatycznie i wyświetlane z właściwym formatowaniem i podświetleniem składni. Kliknij dowolną wartość, aby edytować ją na miejscu — zmiany są zapisywane do API magazynu natychmiast. Dodawaj nowe wpisy za pomocą czystego formularza lub usuwaj wpisy pojedynczo lub zbiorczo.
Przełączaj między localStorage i sessionStorage za pomocą przycisków kart na górze panelu. Każda karta pokazuje liczbę wpisów (np. "localStorage (12)" / "sessionStorage (3)"). Oba typy magazynu są zarządzane z jednego interfejsu.
Kliknij dowolną komórkę wartości, aby edytować ją na miejscu. Dla prostych wartości wpisz nowy ciąg. Dla wartości JSON edytor rozszerza się do sformatowanej textarea z podświetleniem składni. Zmiany są zapisywane do API magazynu natychmiast.
Wartości JSON (obiekty i tablice serializowane z JSON.stringify) są automatycznie wykrywane i wyświetlane z prawidłowym wcięciem i podświetleniem składni. Edytuj sformatowany JSON bezpośrednio — jest re-serializowany, gdy zapisujesz.
Kliknij "Dodaj wpis", aby utworzyć nową parę klucz-wartość. Wprowadź nazwę klucza i wartość (ciąg lub JSON). Wpis jest natychmiast zapisywany do localStorage lub sessionStorage dla bieżącej domeny.
Usuń pojedyncze wpisy za pomocą przycisku usuwania wiersza lub użyj "Wyczyść wszystko", aby usunąć każdy wpis dla bieżącego typu magazynu. Przydatne do resetowania stanu aplikacji podczas testowania.
Zmiany wprowadzone w edytorze są odzwierciedlone natychmiast w aplikacji. Jeśli aplikacja odczytuje wartość z localStorage przy interakcji użytkownika, edycja tej wartości w panelu zmienia to, co aplikacja odczytuje następnie — bez potrzeby ponownego ładowania strony w większości przypadków.
Sprawdź, jakie wartości twoja aplikacja przechowuje w localStorage. Czy token autentykacji jest obecny? Czy obiekt preferencji użytkownika jest poprawnie ustrukturyzowany? Czy przestarzała buforowana wartość powoduje nieoczekiwane zachowanie?
Wyczyść cały localStorage, aby zresetować aplikację do stanu początkowego — przydatne do testowania doświadczeń pierwszego uruchomienia, przepływów onboardingu i domyślnych konfiguracji bez czyszczenia danych przeglądarki dla innych witryn.
Wiele aplikacji przechowuje wartości flag funkcji w localStorage. Edytuj je bezpośrednio, aby włączać lub wyłączać funkcje bez przechodzenia przez UI zarządzania flagami lub ponownego wdrażania.
Edytuj przechowywane preferencje użytkownika, ustawienia motywu, wybory języka lub flagi ukończenia onboardingu, aby symulować różne stany użytkownika i testować, jak aplikacja obsługuje każdy z nich.
Zobacz, jakie dane skrypty zewnętrzne (analityka, czat, reklama) przechowują w localStorage twojej domeny. Audytuj dane pod kątem zgodności z prywatnością i nieoczekiwanego użycia magazynu.
Otwórz pływający dok DevSuite Pro i kliknij ikonę Edytora Local Storage. Otwiera się panel pokazujący wszystkie wpisy localStorage dla bieżącej domeny.
Przewijaj tabelę klucz-wartość. Wartości JSON są automatycznie sformatowane. Przełącz karty, aby zamiast tego wyświetlić sessionStorage.
Kliknij dowolną wartość, aby edytować ją na miejscu. Dla wartości JSON pojawia się sformatowany edytor. Zmiany są zapisywane do API magazynu natychmiast.
Kliknij "Dodaj wpis", aby utworzyć nową parę klucz-wartość. Kliknij ikonę usuwania w dowolnym wierszu, aby go usunąć. "Wyczyść wszystko" usuwa wszystko.
Po edycji wartości magazynu wchodź w interakcję ze stroną, aby zobaczyć, jak aplikacja reaguje na zmienione dane.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 39 narzędzi programistycznych dla swojej przeglądarki.
