Odczytywanie i zapisywanie w localStorage w React

localStorage to wbudowany magazyn przeglądarki z czterema podstawowymi metodami: setItem(key, value), getItem(key), removeItem(key) i clear(). Dane są zachowywane po ponownym załadowaniu strony i ponownym uruchomieniu przeglądarki.

Magazyn znajduje się w obiekcie window i jest przypisany do źródła, co oznacza, że każda domena ma własny, odizolowany magazyn.

Każde wywołanie localStorage działa synchronicznie w głównym wątku. Odczytywanie lub zapisywanie dużych ilości danych może blokować renderowanie i sprawiać, że interfejs działa niepłynnie.

Dlatego należy przechowywać niewielkie wartości i unikać zapisywania danych przy każdym naciśnięciu klawisza lub zdarzeniu przewijania.

localStorage może przechowywać wyłącznie ciągi znaków. Aby zapisać obiekt lub tablicę, należy najpierw zserializować je za pomocą JSON.stringify(value), a dopiero potem wywołać setItem.

Bezpośrednie zapisanie wartości innego typu powoduje jej konwersję, więc obiekt staje się bezużytecznym ciągiem [object Object].

Podczas odczytu wywołuje się JSON.parse(localStorage.getItem(key)), ale parsowanie może zgłosić wyjątek, jeśli zapisany ciąg jest uszkodzony lub został zapisany przez inne źródło.

Parsowanie należy umieścić w bloku try/catch i użyć wartości domyślnej jako rozwiązania awaryjnego, aby błędny wpis nie spowodował awarii komponentu.

localStorage nie zawsze można używać: podczas renderowania po stronie serwera window nie istnieje, a niektóre tryby przeglądania prywatnego zgłaszają wyjątek podczas zapisu. Dostęp należy zabezpieczyć sprawdzeniem funkcji.

Bezpieczny test polega na użyciu try/catch, ustawieniu i usunięciu tymczasowego klucza oraz zwróceniu wartości false, jeśli wystąpi wyjątek.

Większość przeglądarek ogranicza localStorage do około pięciu megabajtów na origin. Przekroczenie tego limitu powoduje zgłoszenie błędu QuotaExceededError podczas zapisu.

Dzięki temu localStorage nadaje się do przechowywania niewielkich ilości danych, ale jest złym wyborem w przypadku obrazów, dużych zbiorów danych lub buforowanych odpowiedzi API.

Dobrymi kandydatami są niewielkie, niewrażliwe dane dotyczące interfejsu użytkownika i stanu użytkownika: preferencje motywu, stan zwinięcia panelu bocznego, ostatnio używane filtry, zamknięte banery oraz niezapisane wersje robocze formularzy.

Są to wartości, które powinny przetrwać ponowne załadowanie strony, ale nie wymagają komunikacji z serwerem.

Należy unikać przechowywania sekretów, takich jak tokeny lub hasła, ponieważ każdy skrypt na stronie może odczytać localStorage, co czyni go podatnym na ataki XSS. Należy również unikać dużych obiektów i nadrzędnego stanu serwera.

Wrażliwe dane uwierzytelniania powinny znajdować się w cookies httpOnly, a kanoniczne dane — na serwerze.

Oba mechanizmy udostępniają ten sam interfejs API, ale sessionStorage jest czyszczony po zamknięciu karty i nie jest współdzielony między kartami. localStorage zachowuje dane bezterminowo i jest współdzielony przez wszystkie karty tego samego origin.

Należy wybrać sessionStorage dla krótkotrwałych danych właściwych dla karty, a localStorage dla trwałych preferencji.

Cookies są małe i wysyłane przy każdym żądaniu HTTP, dzięki czemu nadają się do uwierzytelniania, ale w przypadku ogólnych danych powodują niepotrzebne zużycie przepustowości. IndexedDB to asynchroniczna baza danych przeznaczona do przechowywania dużych, uporządkowanych danych, znacznie przekraczających limit 5 MB.

Cookies należy wybierać do uwierzytelniania odczytywanego przez serwer, localStorage do niewielkich preferencji klienta, a IndexedDB do dużych lub złożonych danych.

Minimalna funkcja pomocnicza zapisuje dane za pomocą localStorage.setItem(key, JSON.stringify(value)), a odczytuje je za pomocą zabezpieczonego try/catch wokół JSON.parse(localStorage.getItem(key)), zwracając wartość domyślną w razie błędu.

Ten niewielki wrapper skupia serializację i obsługę błędów w jednym miejscu.

Sprawdź swoją wiedzę na temat typów danych w localStorage.

Poznałeś interfejs API localStorage, dowiedziałeś się, że działa synchronicznie, przechowuje wyłącznie ciągi znaków i ma limit wynoszący około 5 MB, a także nauczyłeś się bezpiecznie parsować dane oraz sprawdzać dostępność mechanizmu na potrzeby SSR i trybu prywatnego.

Porównałeś również localStorage z sessionStorage, cookies i IndexedDB, aby dobierać odpowiedni magazyn danych.