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";
}
Klucze znalezione
po odczycie: znalezione z wpisanych
Rozmiar danych
suma bajtów klucz+wartość; limit magazynu ~5 MB na origin
Domena (origin)
Web Storage jest widoczny tylko w obrębie tego origin
Magazyn
localStorage trwały / sessionStorage do zamknięcia karty
| Zasada | Jak to działa |
|---|---|
| Skąd pochodzą dane | wyłącznie z Web Storage BIEŻĄCEGO origin (domena + protokół + port strony w pasku adresu); przeglądarka nie udostępnia localStorage innej domeny — polityka same-origin, więc nie podglądniesz np. danych z innych witryn |
| Klucze | wpisujesz je sam, jeden na wiersz; kod silnika przyjmuje maksymalnie 200 unikalnych kluczy po maksymalnie 200 znaków (dłuższe są ucinane, puste wiersze pomijane) |
| Rozmiar | suma bajtów UTF-8 klucza i wartości znalezionych wpisów — kafelek po lewej; limit całego magazynu to zwykle ok. 5 MB na origin (zależnie od przeglądarki 5–10 MB) |
| Magazyn | localStorage (trwały, przetrwa zamknięcie przeglądarki) albo sessionStorage (tylko do zamknięcia karty) — przełącznik „Storage” w ustawieniach |
| Brakujące klucze | bez zmian: status „brak”; przy włączonej opcji „Create missing” skrypt utworzy pusty wpis („”), żeby klucz pojawił się w zakładce Application/Aplikacja devtools |
| Gdzie działa odczyt | w Twojej przeglądarce — skrypt narzędzia czyta wartości lokalnie, a serwer widzi wyłącznie listę kluczy z formularza; żaden zapis nie opuszcza karty (eksport to również plik tworzony lokalnie) |
| Magazyn | Pojemność | Wygasa | Zasięg | Ruch sieciowy |
|---|---|---|---|---|
| localStorage | ok. 5 MB na origin (5–10 MB zależnie od przeglądarki) | nie wygasa — zostaje po zamknięciu przeglądarki | widoczny we wszystkich kartach i oknach tego samego origin | nigdy nie jest wysyłany na serwer |
| sessionStorage | ok. 5 MB na origin | znika z zamknięciem karty (zakładki) | osobny na każdą kartę — nowa karta nie widzi kopii | nigdy nie jest wysyłany na serwer |
| cookies | ok. 4 KB na pojedyncze ciasteczko | wg ustawionej daty wygaśnięcia (albo sesji przeglądarki) | udostępniane kartom i podoknom wg ścieżki i domeny | dołączane automatycznie do KAŻDEGO żądania HTTP na daną domenę |
Warto wiedzieć — Web Storage w praktyce
Tylko bieżący origin
Web Storage dzieli się per origin (domena + protokół + port). Nie zobaczysz kluczy z innej witryny — i dobrze: to fundament izolacji stron. Debugowanie zaczynaj więc od otwarcia narzędzia na tej domenie, której dane chcesz obejrzeć.
Limit ~5 MB i błędy zapisu
Limit magazynu to zwykle ok. 5 MB na origin (przeglądarki deklarują 5–10 MB). Po przekroczeniu zapis rzuca QuotaExceededError — dlatego warto liczyć bajty (kafelek „Rozmiar danych”) i trzymać w Web Storage tylko małe dane, a pliki i obrazy gdzie indziej.
Tokeny i bezpieczeństwo
Wszystko w localStorage czyta dowolny JavaScript na stronie — także skrypt wstrzyknięty atakiem XSS. Tokeny sesyjne w Web Storage to wygodna, ale ryzykowna praktyka; bezpieczniejsze są httpOnly cookies. Podgląd pomoże szybko sprawdzić, co tak naprawdę wylądowało w magazynie.
Eksport do raportu
Przycisk „Pobierz (.json)” zapisuje komplet wpisów z metadanymi (origin, magazyn, czas odczytu, rozmiary w bajtach) — wygodne do ticketu na buga albo porównania stanu przed i po wdrożeniu. Nic nie opuszcza Twojej przeglądarki, dopóki sam nie wyślesz pliku.
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.