localStorage a sessionStorage

API Web Storage udostępnia dwa magazyny klucz-wartość po stronie klienta: localStorage (zachowywany między sesjami) i sessionStorage (czyszczony po zamknięciu karty). Oba magazyny przechowują wartości w postaci ciągów znaków i są dostępne synchronicznie za pośrednictwem JavaScriptu w ramach tego samego originu.

Dane w localStorage pozostają zachowane do momentu jawnego usunięcia ich przez kod, użytkownika lub usunięcia danych przeglądarki. Przetrwają ponowne uruchomienie przeglądarki, odświeżenie strony i zamknięcie karty. Pojemność wynosi zazwyczaj 5–10 MB na origin, zależnie od przeglądarki.

sessionStorage jest przypisany do bieżącej karty przeglądarki i sesji. Dane przetrwają odświeżenie strony w tej samej karcie, ale zostaną usunięte po jej zamknięciu. Dwie karty otwarte dla tej samej witryny mają oddzielne, niezależne magazyny sessionStorage — nie współdzielą danych.

Oba magazyny udostępniają ten sam interfejs API: setItem(key, value), getItem(key), removeItem(key), clear() oraz właściwość length. Ten sam kod działa w obu przypadkach — wystarczy zastąpić localStorage przez sessionStorage lub odwrotnie.

localStorage należy używać do przechowywania: preferencji użytkownika (motywu, języka), buforowanych odpowiedzi API oraz funkcji zapamiętywania zalogowania. sessionStorage należy używać do przechowywania: stanu kroków kreatora lub formularza, tymczasowego koszyka przed dokonaniem zakupu oraz danych, które ze względów prywatności nie powinny być zachowywane między wizytami.

Oba magazyny są ściśle przypisane do originu (protokołu + hosta + portu). https://example.com nie może odczytać localStorage ustawionego przez http://example.com. Stanowi to granicę bezpieczeństwa — subdomeny również są oddzielnymi originami, chyba że document.domain zostanie zmodyfikowane (przestarzałe).

W większości przeglądarek limit dla obu magazynów wynosi około 5 MB na origin. Przekroczenie limitu powoduje zgłoszenie błędu QuotaExceededError. Do przechowywania dużych ilości danych potrzebny jest IndexedDB, który obsługuje gigabajty danych strukturalnych. Web Storage służy do przechowywania małych par klucz-wartość, a nie binarnych obiektów blob ani dużych zbiorów danych.

Odczyt i zapis w Web Storage są synchroniczne i blokują wątek główny. W przypadku dużych operacji odczytu lub zapisu może to powodować przycięcia. Do częstych operacji na dużych ilościach danych należy używać IndexedDB. Wartości w Web Storage powinny być małe, a operacje rzadkie, aby uniknąć problemów z wydajnością.

Web Storage przechowuje wyłącznie ciągi znaków. Obiekty należy serializować za pomocą JSON.stringify(); deserializować za pomocą JSON.parse(). Należy obsługiwać błędy parsowania: try { return JSON.parse(stored) } catch { return defaultValue }. Uszkodzone wartości lub wartości niebędące poprawnym JSON-em w magazynie powodują błędy parsowania.

localStorage w trybie prywatnym/incognito jest czyszczony po zamknięciu wszystkich prywatnych okien — działa wtedy podobnie jak sessionStorage. Kod opierający stan uwierzytelniania na localStorage powinien obsługiwać sytuację, w której localStorage zostanie nieoczekiwanie wyczyszczony.

Przeglądarki coraz częściej ograniczają dostęp do magazynu stron trzecich. Element iframe pochodzący z third-party.com osadzony na first-party.com nie może uzyskać dostępu do localStorage domeny third-party.com. Safari ITP i Firefox Enhanced Tracking Protection partycjonują magazyn — korzystanie z magazynu przez stronę pierwszoplanową pozostaje bez zmian.

Kiedy sessionStorage jest czyszczony?

localStorage pozostaje zachowany bezterminowo do momentu wyczyszczenia go programowo lub przez użytkownika, natomiast sessionStorage jest czyszczony po zamknięciu karty. Oba magazyny są synchronicznymi magazynami klucz-wartość przechowującymi ciągi znaków, przypisanymi do originu i mającymi pojemność około 5 MB. localStorage należy stosować do preferencji i trwałego stanu, a sessionStorage do tymczasowego stanu przypisanego do sesji, który nie powinien przetrwać zamknięcia karty.