JavaScript Academy · Lekcja

localStorage a sessionStorage

Proszę wybrać właściwy czas przechowywania danych.

localStorage a sessionStorage to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Dwa magazyny, ten sam interfejs API

localStorage i sessionStorage mają identyczne metody. Różnica dotyczy okresu przechowywania, czyli tego, jak długo dane pozostają dostępne.

localStorage zachowuje dane

Dane w localStorage pozostają zapisane do momentu ich jawnego usunięcia. Przetrwają przeładowanie strony, zamknięcie karty i ponowne uruchomienie przeglądarki.

localStorage.setItem("theme", "dark");
// Still there days later, after closing the browser

sessionStorage jest tymczasowy

Dane w sessionStorage są przechowywane tylko przez czas trwania sesji karty. Zamknięcie karty je usuwa.

sessionStorage.setItem("step", "2");
// Gone once the tab is closed

Izolacja poszczególnych kart

Każda karta przeglądarki ma własny obiekt sessionStorage. Dwie karty tej samej witryny mają osobne magazyny sesji i nie współdzielą danych.

localStorage jest współdzielony

Natomiast wszystkie karty i okna tego samego originu współdzielą jeden obiekt localStorage. Zapis w jednej karcie jest widoczny w pozostałych.

Zachowanie po przeładowaniu

Zwykłe przeładowanie zachowuje sessionStorage danej karty. Duplikowanie karty może skopiować sesję, ale otwarcie nowej karty rozpoczyna się z pustym magazynem.

sessionStorage.setItem("draft", text);
// Survives F5 reload in the same tab

Wybór odpowiedniego magazynu

localStorage należy używać do długotrwałych preferencji (motyw, język), a sessionStorage do tymczasowego stanu konkretnej karty (krok kreatora, jednorazowy szkic formularza).

Uwaga dotycząca bezpieczeństwa

Żaden z tych magazynów nie jest bezpieczny. Oba mogą być odczytane przez dowolny skrypt na stronie, dlatego nie należy przechowywać w nich haseł ani poufnych tokenów, które powinny pozostać prywatne.

Te same metody wszędzie

Ponieważ interfejsy API są zgodne, można zamienić jeden magazyn na drugi, zmieniając tylko nazwę obiektu. Kod napisany dla jednego działa także z drugim.

const store = useSession ? sessionStorage : localStorage;
store.setItem("k", "v");

Tryb prywatny

W trybie prywatnym/incognito oba magazyny są zazwyczaj czyszczone po zakończeniu sesji, a niektóre przeglądarki ograniczają ich użycie lub je wyłączają. Należy zawsze uwzględnić możliwość nieudanego zapisu.

try {
  localStorage.setItem("k", "v");
} catch (e) {
  console.log("storage unavailable");
}

Oddzielny limit

Każdy magazyn ma własny limit (zwykle około 5 MB na origin). Zapełnienie sessionStorage nie zmniejsza limitu localStorage.

Szybki sprawdzian

Porównanie obu magazynów.

Podsumowanie

Oba magazyny mają ten sam interfejs API, ale różnią się okresem przechowywania. localStorage zachowuje dane między sesjami i jest współdzielony przez wszystkie karty danego originu, natomiast sessionStorage działa tylko podczas jednej sesji karty i jest odizolowany dla każdej karty. Żaden z nich nie jest bezpieczny, a każdy ma własny limit wynoszący około 5 MB.

Często zadawane pytania

Czy lekcja „localStorage a sessionStorage” jest bezpłatna?

Tak — pełny tekst „localStorage a sessionStorage” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „localStorage a sessionStorage”?

Proszę wybrać właściwy czas przechowywania danych. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „localStorage a sessionStorage”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do JavaScript Academy