sessionStorage
Pamięć przeglądarki na pary klucz i wartość, która działa tylko w bieżącej karcie i znika po jej zamknięciu.
- Zwraca
getItem()zwraca zapisany napis albonull. Pozostałe metody zwracająundefined.
Przykład
#sessionStorage.setItem('signupStep', 2)
sessionStorage.setItem('signupData', JSON.stringify({ name: 'Ania', course: 'JavaScript' }))
console.log(sessionStorage.getItem('signupStep'))
console.log(JSON.parse(sessionStorage.getItem('signupData')).course)
sessionStorage.removeItem('signupStep')
console.log(sessionStorage.getItem('signupStep'))2 JavaScript null
Przykłady na tej stronie działają w izolowanej ramce, w której sessionStorage jest niedostępny, dlatego ten kod nie uruchamia się w podglądzie. Na zwykłej stronie wypisuje wynik pokazany powyżej, a dane znikną po zamknięciu karty.
Definicja i zastosowanie
#sessionStorage ma te same metody co localStorage: setItem(), getItem(), removeItem(), clear() i właściwość length. Różni się czasem życia danych: istnieją one tylko w obrębie jednej karty przeglądarki. Odświeżenie strony ich nie usuwa, ale zamknięcie karty już tak.
Każda karta ma własną, osobną pamięć sesji, nawet gdy w dwóch kartach otworzysz tę samą stronę. Dlatego sessionStorage nadaje się do danych związanych z jedną wizytą: kroku w wieloetapowym formularzu, filtrów na liście kursów, miejsca w długiej lekcji albo informacji, że użytkownik zamknął już baner w tej sesji.
Tak jak w localStorage, wartości są zawsze napisami, więc obiekty zapisuj przez JSON.stringify() i odczytuj przez JSON.parse(). Pamięć jest osobna dla każdej domeny, ma limit rzędu kilku megabajtów i jest dostępna dla każdego skryptu na stronie, dlatego nie przechowuj w niej haseł ani tokenów.
Składnia
#sessionStorage.setItem(key, value)
sessionStorage.getItem(key)
sessionStorage.removeItem(key)
sessionStorage.clear()
sessionStorage.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 saved = sessionStorage.getItem('courseFilters')
const filters = JSON.parse(saved) ?? { level: 'wszystkie', sort: 'nowe' }
console.log(filters)
filters.level = 'początkujący'
sessionStorage.setItem('courseFilters', JSON.stringify(filters))
console.log(sessionStorage.getItem('courseFilters')){ level: 'wszystkie', sort: 'nowe' }
{"level":"początkujący","sort":"nowe"}Przy pierwszym wejściu w tej karcie nic nie jest zapisane: getItem() zwraca null, JSON.parse(null) też daje null, więc operator ?? podstawia filtry domyślne. Po odświeżeniu strony wybrane filtry zostaną, a w nowej karcie znów będą domyślne.
const banner = document.querySelector('#promo')
if (sessionStorage.getItem('promoClosed') === 'yes') {
banner.hidden = true
}
document.querySelector('#close-promo').addEventListener('click', () => {
banner.hidden = true
sessionStorage.setItem('promoClosed', 'yes')
console.log('Baner wróci dopiero w nowej karcie')
})Baner wróci dopiero w nowej karcie
Wynik pojawia się po kliknięciu przycisku zamykającego baner. Przy przechodzeniu między podstronami w tej samej karcie baner pozostaje ukryty, a po otwarciu strony w nowej karcie znów się pokaże.
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
#- Wybierz
sessionStoragedo danych jednej wizyty (krok formularza, filtry), alocalStoragedo ustawień, które mają przetrwać zamknięcie przeglądarki. - Zduplikowanie karty kopiuje jej
sessionStoragedo nowej karty, ale od tej chwili obie pamięci są niezależne. - Dostęp do pamięci otaczaj blokiem
try...catch. W niektórych trybach prywatności i w ramkach bez dostępu do danych witryny (jak podgląd na tej stronie) odczyt rzuca błądSecurityError.
Powiązane hasła
#- localStoragePamięć przeglądarki na pary klucz i wartość, która przetrwa odświeżenie strony i ponowne uruchomienie przeglądarki.
- 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.
- ??Operator ?? (nullish coalescing) zwraca prawą stronę tylko wtedy, gdy lewa to null lub undefined. Idealny do wartości domyślnych.
Widzisz błąd albo brakuje przykładu? Napisz do nas.