Jak przechowywać dane w przeglądarce cz.1

Jak przechowywać dane w przeglądarce?

Pewnie wielokrotnie miałeś potrzebę „zapisania sobie czegoś na froncie”. Komunikacja poprzez API, pobieranie danych z bazy danych, czasami jest zupełnie niepotrzebne. Do spełnienia założeń biznesowych wystarczy o wiele prostsze rozwiązanie.

Dzisiejszy artykuł jest pierwszym z mini serii browser storage. Omówimy w niej temat sposobów przechowywania danych w nowoczesnych przeglądarkach.

Dlaczego miałbym cokolwiek zapisywać?

Za każdym razem, gdy użytkownik korzysta z naszej aplikacji i zamknie kartę, całą przeglądarkę lub tylko odświeży stronę, informacje zapisane w pamięci (in memory) są bezpowrotnie kasowane.

Także wszystkie wartości zmiennych, reactowe stany itp. będę automatycznie czyszczone. Dla większości sytuacji jest to zjawisko pożądane, ale czasem pojawi się potrzeba przechowywania różnych danych takich jak informacje o sesji, użytkowniku, jego preferencjach itp.

Zasadniczo wrażliwe dane powinny być przechowywane poza przeglądarką, jednakże nie wszystkie muszą być „top secret” i możemy ten fakt sprytnie wykorzystać.

O wiele prostszym rozwiązaniem będzie zapisanie informacji np. o preferowanym kolorze strony lub języku wyświetlanych treści w przeglądarce i niepobieranie ich z backendu poprzez API. Dzięki temu nie będzie trzeba wykonywać dodatkowego requestu i tym samym zyska na tym ogólna wydajność naszej aplikacji

Gdzie tego wszystkiego szukać?

Wszystkie omawiane w tym artykule zagadnienia możemy znaleźć w narzędziach deweloperskich naszej przeglądarki (w moim przypadku Chrome), patrz screen poniżej:

Jak łatwo możesz zauważyć, w sekcji Storage znajduje się kilka pozycji. Z niektórych będziesz korzystać bardzo często, a z innych tylko po to, by zaimponować na rekrutacji :D. Tak czy inaczej, warto coś wiedzieć o każdej z nich, by dobierać do projektu najlepsze rozwiązania w zależności od potrzeb.

Web Storage API

W przeglądarce mamy dostępne Web Storage API, dzięki któremu jesteśmy w stanie przechowywać dane. W dużym skrócie jest to zbiór mechanizmów umożliwiających zapisywanie rekordów klucz-wartość.

Web Storage API składa się z dwóch części:

• localStorage
• sessionStorage

Możliwość obsługi rekordów umieszczonych w zarówno local, jak i session storage umożliwia nam interfejs Storage. Posiada on bardzo proste oraz intuicyjne metody:

• key – gdy podamy liczbę jako argument, to zwróci nam odpowiedni klucz (jak tablica)
• getItem – podajemy nazwę klucza i zwraca nam jego wartość
• setItem – podajemy nazwę klucza i wartość, a metoda ustawia go w storage
• removeItem – podajemy nazwę klucza, a metoda usuwa go ze storage
• clear – czyści całe storage

Mimo że localStorage i sessionStorage używają tego samego interfejsu do obsługi danych, to posiadają dość istotne różnice. Przyjrzyjmy im się nieco bliżej

Local Storage

Dostęp do localStorage posiadamy za pośrednictwem globalnego obiektu window. Wystarczy, że po kropce się do niego odwołamy: window.localStorage

Podstawową cechą localStorage jest fakt, że NIE JEST ono czyszczone automatycznie. Oznacza to, że cokolwiek tam umieścimy, będziemy musieli wyczyścić ręcznie z poziomu przeglądarki lub kodu JavaScript

Co więcej, maksymalny rozmiar przechowywanych danych w nowoczesnych przeglądarkach wynosi 5MB

Dodatkowo musimy mieć na uwadze, że localStorage działa synchronicznie co oznacza, że odczyt zapis itp. będzie blokował działanie naszego skryptu do momentu zakończenia operacji

Kiedy warto zastosować:

• Dla danych, które nie są wrażliwe
• Informacje, które nie powinny być kasowane wraz z zamknięciem strony/przeglądarki

Session Storage

Uzyskać dostęp do sessionStorage możemy praktycznie tak samo, jak w przypadku localStorage, zmienia się tylko nazwa klucza: window.sessionStorage

Zasadniczą cechą, która odróżnia ten typ storage od poprzedniego, jest to, że czyści się ona automatycznie. Istnieje oczywiście taka sama jak poprzednio możliwość, zrobienia tego ręcznie natomiast wystarczy również zamknąć okno przeglądarki i storage samo się wykasuje

To, co łączy sessionStorage z wcześniej opisanym localStorage to fakt, że używają tego samego intefejsu do obsługi danych oraz limit pamięci i synchroniczność działania

Dodatkową różnicą jest to, że localstorage jest to samo, nawet jeśli otworzymy kilka tabów w tej samej przeglądarce, a sessionStorage jest nowe dla każdego nowego taba

Kiedy warto zastosować:

• Korzystajmy z sessionStorage, gdy informacje powinny być kasowane po zamknięciu karty przeglądarki i nie chcemy tego robić ręcznie

Przydatne Linki:

• Web Storage API MDN
• Storage API MDN