sessionStorage, IndexedDB i wybór właściwego API

sessionStorage udostępnia dokładnie te same metody co localStorage, ale jego czas życia jest powiązany z kartą. Po zamknięciu karty lub okna dane są automatycznie usuwane.

Jest również odizolowany dla każdej karty, więc dwie karty nie współdzielą danych sessionStorage.

sessionStorage świetnie sprawdza się w przypadku kreatora wieloetapowego, gdy postęp ma być zachowany po ponownym załadowaniu strony w ramach bieżącej sesji, ale usunięty po zamknięciu karty.

Użytkownik może odświeżyć stronę w trakcie wypełniania formularza bez utraty danych, a po zakończeniu lub opuszczeniu formularza nic nie pozostaje.

IndexedDB to asynchroniczna, transakcyjna baza danych wbudowana w przeglądarkę. Może przechowywać znacznie więcej niż limit 5 MB localStorage i obsługuje uporządkowane obiekty, tablice, a nawet dane binarne.

Ponieważ działa asynchronicznie, nie blokuje wątku głównego tak jak localStorage.

Surowe API IndexedDB jest rozwlekłe i oparte na zdarzeniach, dlatego biblioteki takie jak idb-keyval opakowują je w proste funkcje oparte na Promise, takie jak get, set i del.

Zapewnia to wygodę korzystania podobną do localStorage, a jednocześnie pojemność IndexedDB i działanie asynchroniczne.

Ponieważ IndexedDB może przechowywać wartości typu Blob i ArrayBuffer, idealnie nadaje się do buforowania obrazów, dźwięku, pobranych plików lub zasobów dostępnych offline.

Takie dane szybko przekroczyłyby limity localStorage i trzeba byłoby serializować je do ciągów znaków, czego IndexedDB pozwala uniknąć.

Interfejs API Cache, często używany razem z service workerami, przechowuje całe obiekty HTTP Response przypisane do żądań. Został zaprojektowany specjalnie do buforowania odpowiedzi sieciowych w podejściu offline-first.

Należy używać go do dostarczania zasobów i odpowiedzi API bez dostępu do sieci, gdy aplikacja działa offline.

localStorage przechowuje dane bezterminowo, dopóki nie zostaną wyczyszczone, sessionStorage działa tylko przez czas trwania sesji karty, IndexedDB również przechowuje dane bezterminowo, a cookies mają konfigurowalny czas wygaśnięcia określany za pomocą atrybutów.

Dopasowanie wymaganego czasu życia danych do odpowiedniego magazynu pozwala uniknąć niespodzianek związanych z ich znikaniem.

localStorage i sessionStorage są ograniczone do około 5 MB, cookies do około 4 KB każde, natomiast IndexedDB może wykorzystywać setki megabajtów lub więcej, zależnie od urządzenia i przeglądarki.

W przypadku większych ilości danych IndexedDB jest jedyną praktyczną opcją w przeglądarce.

localStorage, sessionStorage i cookies działają synchronicznie, blokując główny wątek podczas dostępu. IndexedDB i Cache API działają asynchronicznie i są oparte na Promise.

Asynchroniczny dostęp zapewnia responsywność interfejsu nawet podczas odczytu lub zapisu większych ilości danych.

Należy używać cookies z atrybutem httpOnly do przechowywania tokenów uwierzytelniających, aby skrypty nie mogły ich odczytywać, localStorage do przechowywania niewielkich trwałych preferencji, IndexedDB do dużych plików i złożonych danych offline, a sessionStorage do krótkotrwałych wersji roboczych w obrębie karty.

Mechanizm przechowywania należy dopasować do wrażliwości, rozmiaru i czasu życia danych.

Nie istnieje jeden najlepszy interfejs API do przechowywania danych — każde rozwiązanie stanowi kompromis między pojemnością, trwałością, sposobem synchronizacji i bezpieczeństwem. Znajomość tych różnic pozwala dokonywać świadomego wyboru.

Typowa aplikacja korzysta z kilku rozwiązań: cookies do uwierzytelniania, localStorage do preferencji i IndexedDB do zasobów offline.

Proszę sprawdzić znajomość zasad wyboru mechanizmu przechowywania danych.

Porównano sessionStorage, localStorage, IndexedDB, cookies i Cache API pod względem trwałości, pojemności, sposobu synchronizacji i bezpieczeństwa.

Omówiono wybór w zależności od zastosowania: cookies do uwierzytelniania, localStorage do niewielkich preferencji, IndexedDB do dużych lub złożonych danych oraz sessionStorage do wersji roboczych ograniczonych do jednej karty.