localStorage
Pamięć przeglądarki na pary klucz i wartość, która przetrwa odświeżenie strony i ponowne uruchomienie przeglądarki.
- Zwraca
getItem()zwraca zapisany napis albonull. Pozostałe metody zwracająundefined.
Przykład
#localStorage.setItem('theme', 'dark')
localStorage.setItem('level', 7)
console.log(localStorage.getItem('theme'))
console.log(localStorage.getItem('level'), typeof localStorage.getItem('level'))
console.log(localStorage.getItem('avatar'))
localStorage.removeItem('theme')
console.log(localStorage.getItem('theme'))dark 7 string null null
Przykłady na tej stronie działają w izolowanej ramce, w której localStorage jest niedostępny, 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
#localStorage pozwala zapisać w przeglądarce niewielkie dane, które zostaną tam po zamknięciu karty i ponownym wejściu na stronę. Typowe zastosowania to wybrany motyw, język interfejsu, szkic formularza czy postęp w lekcji niezalogowanego użytkownika.
Dane zapisujesz metodą setItem(klucz, wartość), odczytujesz przez getItem(klucz) (zwraca null, gdy klucza nie ma) i usuwasz przez removeItem() lub clear(). Wartości są zawsze napisami, więc obiekty i tablice zamieniaj na JSON przez JSON.stringify(), a po odczycie z powrotem przez JSON.parse().
Pamięć jest osobna dla każdej domeny i zwykle mieści około 5 MB. Każdy skrypt na stronie ma do niej dostęp, więc nie trzymaj tam haseł ani tokenów. Pokrewny sessionStorage ma te same metody, ale czyści się po zamknięciu karty.
Składnia
#localStorage.setItem(key, value)
localStorage.getItem(key)
localStorage.removeItem(key)
localStorage.clear()
localStorage.lengthParametry
#key
napis
Nazwa, pod którą zapisujesz lub odczytujesz wartość.value
napis
Wartość do zapisania. Inne typy zostaną zamienione na napis.
Więcej przykładów
#const progress = { lesson: 12, points: 340, badges: ['Start', 'Seria 7 dni'] }
localStorage.setItem('progress', JSON.stringify(progress))
const saved = JSON.parse(localStorage.getItem('progress'))
console.log(saved.points)
console.log(saved.badges)
localStorage.setItem('broken', progress)
console.log(localStorage.getItem('broken'))340 ['Start', 'Seria 7 dni'] [object Object]
W podglądzie localStorage jest niedostępny, ale na zwykłej stronie kod działa. Ostatnie wiersze pokazują, że obiekt zapisany bez JSON.stringify() zamienia się w bezużyteczny napis [object Object].
function loadSettings() {
try {
return JSON.parse(localStorage.getItem('settings')) ?? { theme: 'light', sound: true }
} catch {
return { theme: 'light', sound: true }
}
}
console.log(loadSettings()){ theme: 'light', sound: true }Przy pierwszej wizycie nic nie jest zapisane, więc funkcja zwraca ustawienia domyślne. Blok try...catch chroni też przed uszkodzonymi danymi i przed sytuacją, gdy pamięć jest zablokowana, tak jak w podglądzie na tej stronie.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Przed zapisem obiektów zawsze użyj
JSON.stringify(), a po odczycieJSON.parse(). - Nie zapisuj w
localStoragehaseł ani tokenów sesji. Każdy skrypt na stronie może je odczytać. - Odczyt i zapis otaczaj blokiem
try...catch. W trybie prywatnym lub przy zablokowanych danych witryn dostęp do pamięci może rzucić błąd.
Powiązane hasła
#- 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ę.
- try...catchPrzechwytuje błędy rzucone w bloku try i obsługuje je w catch. Opcjonalny finally wykona się zawsze.
- MapKolekcja par klucz i wartość, w której kluczem może być dowolna wartość, a kolejność dodawania jest zachowana.
Widzisz błąd albo brakuje przykładu? Napisz do nas.