Podgląd i edytor localStorage
Podglad i edycja zawartosci localStorage przegladarki. Sprawdz, dodaj i usun klucze bez DevTools. Bezpłatnie.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćPodgląd i edytor localStorage — zarządzaj danymi przeglądarki
Edytor localStorage pozwala przeglądać, dodawać, edytować i usuwać dane z localStorage przeglądarki bezpośrednio z interfejsu webowego. Wyświetla klucze i wartości w czytelnej formie, obsługuje walidację JSON i pokazuje zajęte miejsce w storage.
Czym jest localStorage?
localStorage to webowy mechanizm przechowywania danych w przeglądarce po stronie klienta, wprowadzony w HTML5. Dane w localStorage są: trwałe — pozostają po zamknięciu przeglądarki (w odróżnieniu od sessionStorage), przypisane do origin (protokół + domena + port) — strony z różnych domen nie mają do nich dostępu, przechowywane jako pary klucz-wartość gdzie zarówno klucz jak i wartość są stringami, ograniczone pojemnością — zazwyczaj 5–10 MB per origin (zależnie od przeglądarki). Porównanie z cookies: localStorage nie jest wysyłany automatycznie z żądaniami HTTP (mniejsze ryzyko CSRF), ma większą pojemność (4 KB vs 5 MB), nie ma opcji wygaśnięcia.
API localStorage w JavaScript
Podstawowe operacje: localStorage.setItem('klucz', 'wartość') — zapisz, localStorage.getItem('klucz') — odczytaj (null jeśli nie istnieje), localStorage.removeItem('klucz') — usuń, localStorage.clear() — usuń wszystkie, localStorage.length — liczba elementów, localStorage.key(index) — klucz pod indeksem. Przechowywanie obiektów JSON: localStorage.setItem('user', JSON.stringify({name: 'Jan', age: 30})) — odczyt: JSON.parse(localStorage.getItem('user')). Edytor wizualizuje JSON w strukturze drzewa dla łatwiejszej nawigacji.
Zastosowania localStorage w aplikacjach webowych
localStorage jest powszechnie używany do: zapamiętywania preferencji użytkownika (ciemny motyw, język, layout), przechowywania tokenów autoryzacyjnych (JWT — uwaga: ryzyko XSS), cache danych API (tymczasowe przechowywanie odpowiedzi), przechowywania stanu aplikacji SPA (React, Vue, Angular), zapamiętywania wypełnionych formularzy (auto-save drafts), koszyka zakupowego dla niezalogowanych użytkowników, historii wyszukiwań i ostatnich aktywności.
Bezpieczeństwo localStorage
Ważne aspekty bezpieczeństwa: Podatność XSS — jeśli atakujący wykona JavaScript na Twojej stronie (XSS), może odczytać pełną zawartość localStorage. Nigdy nie przechowuj haseł, kluczy prywatnych ani danych karty płatniczej w localStorage. Nie jest szyfrowany — dane są przechowywane jako plaintext (widoczne przez DevTools). Samo-zamknięcie — dostępny tylko dla tego samego origin, nie przesyłany automatycznie (bezpieczniejszy niż cookies pod tym względem). Alternatywy dla wrażliwych danych: httpOnly cookies (niedostępne dla JS), IndexedDB z szyfrowaniem, serwer.
Najczęściej zadawane pytania
Jak sprawdzić i wyczyścić localStorage w Chrome?
Chrome DevTools: F12 → Application (lub Aplikacja) → Storage → Local Storage → wybierz origin. Widok pokazuje wszystkie klucze i wartości. Usunięcie pojedynczego: zaznacz wiersz → Delete. Wyczyść wszystkie: prawy klik na origin → "Clear". Lub w konsoli: localStorage.clear(). Filtry pozwalają szukać po kluczu.
Jaka jest maksymalna pojemność localStorage?
Najczęściej 5 MB per origin (Chrome, Firefox, Safari). Edge: 10 MB. Sprawdź aktualną pojemność: navigator.storage.estimate().then(e => console.log(e.quota, e.usage)). Gdy przekroczysz limit, setItem rzuca wyjątek QuotaExceededError. Dla większych danych: IndexedDB (gigabajty), Cache API (Service Worker), lub serwer. Edytor pokazuje aktualne zajęcie miejsca w KB.
Jaka jest różnica między localStorage a sessionStorage?
localStorage: trwały po zamknięciu karty/okna/przeglądarki, współdzielony między kartami tego samego origin. sessionStorage: trwa tylko przez czas sesji (zamknięcie karty usuwa dane), oddzielny dla każdej karty (nawet tego samego origin). Oba: 5 MB, tylko strings, synchroniczne API, dostęp przez JS. Wybierz localStorage dla trwałych preferencji, sessionStorage dla tymczasowego stanu formularza.
Czy localStorage jest dostępny w trybie prywatnym (Incognito)?
Tak — localStorage działa w trybie prywatnym, ale jest oddzielny od normalnego localStorage (różne dane) i jest kasowany po zamknięciu prywatnego okna. Przeglądarki mogą ograniczać dostęp do localStorage gdy cookies są zablokowane (Safari ITP) — sprawdź przez try/catch: try { localStorage.setItem('test','x'); } catch(e) { console.log('localStorage blocked'); }.
Jak synchronizować localStorage między kartami przeglądarki?
Zdarzenie storage: window.addEventListener('storage', (e) => { console.log(e.key, e.oldValue, e.newValue); });. To zdarzenie odpala się w INNYCH kartach tego samego origin gdy localStorage się zmieni (nie w tej samej karcie). Do komunikacji między kartami: BroadcastChannel API (new BroadcastChannel('channel')), SharedWorker, lub storage events. Edytor automatycznie odświeża widok gdy inne okno zmieni localStorage.