Współczesne aplikacje webowe coraz częściej przypominają rozbudowane aplikacje desktopowe. Oczekujemy, że będą szybkie, responsywne i dostępne również offline. Aby to osiągnąć, przeglądarki internetowe oferują różne mechanizmy przechowywania danych lokalnie po stronie użytkownika. Do najczęściej wykorzystywanych należą: localStorage, sessionStorage oraz IndexedDB.
W tym artykule przyjrzymy się każdemu z nich, porównamy ich możliwości, zastosowania i ograniczenia. To wiedza niezbędna, jeśli tworzysz nowoczesne aplikacje frontendowe, PWA lub chcesz zwiększyć wydajność i responsywność Twojej strony.
localStorage – trwałe dane w zasięgu jednej domeny
localStorage to jedna z najprostszych i najczęściej używanych form przechowywania danych po stronie klienta. Działa w ramach polityki same-origin, czyli przechowuje dane osobno dla każdej domeny.
Cechy localStorage:
- Dane nie wygasają – pozostają w przeglądarce nawet po jej zamknięciu i ponownym uruchomieniu.
- Dostęp z poziomu JavaScript – wystarczy localStorage.getItem() i localStorage.setItem().
- Pojemność – zazwyczaj do 5 MB na domenę (zależnie od przeglądarki).
- Przechowuje tylko dane tekstowe – inne typy (np. obiekty) trzeba serializować do JSON.
Obsługa localStorage w języku JavaScript.
Typowe zastosowania:
- Zapamiętywanie preferencji użytkownika (np. ciemny motyw, język)
- Dane koszyka zakupowego
- Ustawienia interfejsu
sessionStorage – dane tymczasowe na czas sesji
sessionStorage działa bardzo podobnie do localStorage, z jedną zasadniczą różnicą – przechowuje dane tylko do momentu zamknięcia karty przeglądarki.
Cechy sessionStorage:
- Zakres działania: tylko w danej zakładce (tabie), nawet w ramach tej samej domeny.
- Dostępność: natychmiastowa z poziomu JavaScript.
- Bezpieczniejsze dla danych sesyjnych, które nie powinny być przechowywane trwale.
Obsługa sessionStorage w języku JavaScript.
Zastosowania:
- Tymczasowe dane logowania
- Stany formularzy w czasie jednej sesji
- Dane filtrowania lub sortowania tylko dla jednej zakładki
IndexedDB – lokalna baza danych w przeglądarce
Kiedy potrzebujesz przechowywać większe ilości danych, struktury złożone lub dane offline, sięgnij po IndexedDB. To zaawansowana baza danych oparta na obiektach (object store), działająca asynchronicznie w tle.
Cechy IndexedDB:
- Obsługuje obiekty JavaScript bez potrzeby serializacji
- Działa asynchronicznie – operacje wymagają eventów lub async/await (przy użyciu wrapperów)
- Wspiera indeksowanie – możliwość szybkiego wyszukiwania po kluczach
- Pojemność – znacznie większa niż localStorage (dziesiątki lub setki MB, zależnie od przeglądarki)
Przykład kodu JavaScript tworzący lokalną bazę danych IndexedDB o nazwie „StudentDB” oraz zapisujący w niej dane studenta.
Zastosowania:
- Dane offline dla Progressive Web Apps (PWA)
- Cache danych z API
- Lokalne repozytorium wyników testów, ocen, stanu gry, itp.
Podsumowanie
Wybór odpowiedniego mechanizmu przechowywania danych w przeglądarce ma kluczowe znaczenie dla wydajności aplikacji webowej. localStorage i sessionStorage sprawdzają się przy prostych danych użytkownika, natomiast IndexedDB oferuje większe możliwości dla złożonych aplikacji działających offline. Znajomość tych narzędzi pozwala lepiej projektować nowoczesne, szybkie i niezawodne frontendy.