localStorage vs sessionStorage
localStorage i sessionStorage mają te same metody, ale localStorage przetrwa zamknięcie przeglądarki, a sessionStorage czyści się po zamknięciu karty.
Porównanie w tabeli
#Czas życia danych
- localStorage
- Do ręcznego usunięcia albo wyczyszczenia danych witryny
- sessionStorage
- Do zamknięcia karty przeglądarki
Dostęp z innych kart tej samej domeny
- localStorage
- Tak, wspólna pamięć dla wszystkich kart
- sessionStorage
- Nie, każda karta ma własną pamięć
Zduplikowana karta
- localStorage
- Widzi te same dane od razu
- sessionStorage
- Dostaje kopię danych, potem działa niezależnie
Dane po ponownym uruchomieniu komputera
- localStorage
- Zostają zapisane
- sessionStorage
- Nie istnieją, karta została zamknięta wcześniej
Metody i limit pamięci
- localStorage
- Te same metody, limit około 5 MB
- sessionStorage
- Te same metody, limit około 5 MB
Typowe użycie
- localStorage
- Motyw, język, ustawienia na przyszłe wizyty
- sessionStorage
- Krok formularza, filtry, dane jednej wizyty
Przykład
#localStorage.setItem('theme', 'dark')
sessionStorage.setItem('step', 2)
console.log(localStorage.getItem('theme'))
console.log(sessionStorage.getItem('step'))
localStorage.removeItem('theme')
console.log(localStorage.getItem('theme'))
console.log(sessionStorage.getItem('step'))dark 2 null 2
Przykłady na tej stronie działają w izolowanej ramce, w której obie pamięci są niedostępne, dlatego ten kod nie uruchamia się w podglądzie. Na zwykłej stronie działa bez problemu i wypisuje wynik pokazany powyżej.
Definicja i zastosowanie
#Obie pamięci udostępniają te same metody: setItem(), getItem(), removeItem(), clear() i właściwość length. Przechowują tylko napisy (obiekty zamieniaj przez JSON.stringify()), są osobne dla każdej domeny i mają limit rzędu kilku megabajtów. Odświeżenie strony nie usuwa danych z żadnej z nich.
Różni je czas życia i zakres. localStorage zostaje w przeglądarce, aż sam go usuniesz albo użytkownik wyczyści dane witryny, i jest wspólny dla wszystkich kart tej samej domeny. sessionStorage istnieje tylko w jednej karcie: zamknięcie karty go usuwa, a druga karta z tą samą stroną ma już własną, pustą pamięć sesji (zduplikowana karta dostaje kopię, ale od tej chwili obie działają niezależnie).
Wybór zależy od tego, jak długo dane powinny żyć. Ustawienia, motyw czy język interfejsu, które mają przetrwać do następnej wizyty, zapisuj w localStorage. Krok formularza, filtry listy czy informację, że baner został zamknięty w tej wizycie, trzymaj w sessionStorage.
Składnia
#localStorage.setItem(key, value)
localStorage.getItem(key)
sessionStorage.setItem(key, value)
sessionStorage.getItem(key)Więcej przykładów
#const settings = { theme: 'dark', fontSize: 16 }
localStorage.setItem('settings', JSON.stringify(settings))
const signup = { step: 2, email: 'ania@example.com' }
sessionStorage.setItem('signup', JSON.stringify(signup))
console.log(JSON.parse(localStorage.getItem('settings')))
console.log(JSON.parse(sessionStorage.getItem('signup'))){ theme: 'dark', fontSize: 16 }
{ step: 2, email: 'ania@example.com' }W podglądzie obie pamięci są niedostępne, ale na zwykłej stronie kod działa. settings przetrwa zamknięcie przeglądarki, a signup zniknie po zamknięciu karty.
console.log(localStorage.getItem('missing'))
console.log(sessionStorage.getItem('missing'))
console.log(localStorage.getItem('missing') === sessionStorage.getItem('missing'))null null true
Obie metody getItem() dla brakującego klucza zwracają null, niezależnie od tego, która pamięć go szuka.
Dobre praktyki
#- Zanim zapiszesz obiekt lub tablicę, zamień je na napis przez
JSON.stringify(), a po odczycie użyjJSON.parse(). Obie pamięci przechowują tylko napisy. - Nie trzymaj w żadnej z tych pamięci haseł ani tokenów sesji. Każdy skrypt działający na stronie ma do nich dostęp.
- Otaczaj odczyt i zapis blokiem
try...catch. W trybie prywatnym albo przy zablokowanych danych witryny dostęp może rzucić błąd.
Powiązane hasła
#- localStoragePamięć przeglądarki na pary klucz i wartość, która przetrwa odświeżenie strony i ponowne uruchomienie przeglądarki.
- sessionStoragePamięć przeglądarki na pary klucz i wartość, która działa tylko w bieżącej karcie i znika po jej zamknięciu.
- JSON.stringify()Zamienia wartość JavaScript, np. obiekt lub tablicę, na napis w formacie JSON.
- JSON.parse()Zamienia napis w formacie JSON na wartość JavaScript, np. obiekt lub tablicę.
Widzisz błąd albo brakuje przykładu? Napisz do nas.