Jak zapisać dane w localStorage?

Joanna

JavaScript

Czasem zdarza się, że potrzebujemy zapamiętać pewne informacje odnoszące się do konkretnego użytkownika, aby móc je później ponownie wykorzystać w naszej aplikacji. Niekoniecznie trzeba te dane od razu wysyłać na serwer, wystarczy, że zostaną zapisane lokalnie, w przeglądarce tego użytkownika. Jest to wygodne rozwiązanie, bo nie musimy zapisywać danych w bazie, a przeglądarka ma do nich łatwy dostęp.

Czym jest localStorage?

Jest to miejsce w przeglądarce użytkownika, w którym można przechowywać różnego rodzaju dane – w uproszczeniu: schowek na dane. Ma do nich dostęp tylko przeglądarka, dane nie muszą być więc pobierane lub wysyłane na serwer, jak to ma miejsce w przypadku cookies. Dzięki temu można korzystać z nich również nie mając dostępu do internetu. Ponadto dane takie (w przeciwieństwie do cookies) nie mają ustalonego terminu ważności, po którym wygasają. Mogą więc być wykorzystywane tak długo, dopóki użytkownik nie usunie ich ręcznie. Można odwołać się do nich np. za pomocą JavaScriptu, a odwołanie takie jest możliwe tylko z domeny, z której dane pochodzą.

Metody wykorzystywane w pracy z localStorage

Według dokumentacji localStorage posługuje się kilkoma metodami, które odpowiadają za zapis, pobranie, usunięcie lub wyczyszenie danych z przeglądarki użytkownika:

  • localStorage.getItem(keyName) – pobranie danych z local storage, przypisanych do danego klucza
  • localStorage.key(index) – odwołanie do elementu n w obiekcie
  • localStorage.setItem(keyName, keyValue) – zapis danych w local storage
  • localStorage.removeItem(keyName) – usunięcie danych, przypisanych do danego klucza
  • localStorage.clear() – usunięcie wszystkich danych z local storage

Jak zapisać dane lokalnie w przeglądarce przy użyciu localStorage?

Dane zapisujemy przy wykorzystaniu metody setItem(), podając klucz oraz wartość, którą chcemy zapisać:

localStorage.setItem(key, value);

localStorage.setItem("token", "abc123");

Dane w localStorage przechowywane są w postaci stringu. Oznacza to, że jeśli chcemy zapisać tablicę lub obiekt, musimy najpierw zamienić je na tekst za pomocą JSON.stringify().

const numbers = [1, 2, 3, 4];
localStorage.setItem("numbers", JSON.stringify(numbers));

const settings = { theme: "dark", fontSize: 14 };
sessionStorage.setItem("settings", JSON.stringify(settings));

Jak odczytać dane z localStorage?

Do odczytu danych służy metoda getItem(), która jako parametr przyjmuje nazwę klucza. Mając na uwadze, że dane w localStorage przechowywane są w postaci stringu, trzeba pamiętać, aby zamienić je na właściwy typ. Na przykład JSON.parse() zmieni tekst na tablicę lub obiekt, a Number() czy Boolean() pozwolą odzyskać liczby i wartości logiczne. Dzięki temu możemy korzystać z danych tak, jakby były zwykłymi zmiennymi w JavaScript.

String

const token = localStorage.getItem("token");

Tablica

const parsedNumbers = JSON.parse(localStorage.getItem("numbers")) ?? [];

Obiekt

const parsedSettings = JSON.parse(sessionStorage.getItem("settings")) ?? {};

Boolean / liczby

localStorage.setItem("isLogged", true);        // faktycznie zapisze się "true" (string!)
localStorage.setItem("age", 30);               // zapisze się "30" (string)

const isLogged = localStorage.getItem("isLogged") === "true";   // konwersja z powrotem do boolean
const age = Number(localStorage.getItem("age")) || 0;           // konwersja do liczby

Odczyt nazwy klucza znajdującego się pod danym indeksem

Storage.key() to metoda, która zwraca nazwę klucza (string) znajdującego się w localStorage pod danym indeksem:

localStorage.setItem("user", "John");
localStorage.setItem("age", "30");
localStorage.setItem("city", "New York");

let keyName = localStorage.key(1);               // Pobierz nazwę klucza znajdującego się pod indexem 1

console.log("Key at index 1 is:", keyName);      // "age"

Indeksy są numerowane od 0, ale ich kolejność nie jest gwarantowana (zależy od przeglądarki). Można za to odczytać nazwy wszystkich kluczy w pętli:

function forEachKey(callback) {
  for (let i = 0; i < localStorage.length; i++) {
    console.log(localStorage.key(i));
  }
}

Jak usunąć dane z localStorage?

Aby usunąć dane należy użyć metody removeItem(), która jako parametr przyjmuje nazwę klucza do usunięcia. Do całkowitego wyszczyszczenia wszystkich danych służy metoda clear() 

if (localStorage.getItem("token")) {
  console.log("User has token");
}

localStorage.removeItem("token");

localStorage.clear();

LocalStorage limit

Przeglądarki internetowe nakładają ograniczenie na ilość danych, które można zapisać w localStorage. Zazwyczaj jest to od 5 MB do 10 MB na domenę, w zależności od przeglądarki. Limit ten jest znacznie większy niż w przypadku cookies, które mogą przechowywać jedynie około 4 KB danych.

Jeżeli aplikacja spróbuje zapisać więcej danych, niż pozwala na to dostępny limit, metoda setItem() zgłosi błąd typu QuotaExceededError. Z tego powodu localStorage nadaje się dobrze do przechowywania ustawień użytkownika, niewielkich porcji danych czy cache z API, ale nie jest odpowiednim miejscem do składowania dużych plików, takich jak zdjęcia czy filmy. W takich przypadkach lepiej wykorzystać IndexedDB (wbudowana w przeglądarkę baza danych działająca po stronie użytkownika – offline).

LocalStorage vs SessionStorage

Poczas gdy localStorage pozwala na trwały zapis danych, które nie znikają po zamknięciu przeglądarki, sessionStorage przetrzymuje dane tylko do momentu zamknięcia karty/okna (tylko na jedną sesję). Jest to przydatne, gdy potrzebujesz zapisać dane tylko „na chwilę”, np. podczas wypełniania wieloetapowego formularza albo kroków zakupowych w koszyku, lub podczas filtracji produktów, która po zamknięciu przeglądarki powinna wrócić do pierwotnego stanu. Każda karta w przeglądarce posiada własne dane – sessionStorage nie przenosi się między zakładkami.

LocalStorage vs Cookies

Cookies to małe pliki tekstowe zapisywane w przeglądarce przez stronę internetową. Służą do przechowywania niewielkich informacji, np. identyfikatora sesji, preferencji użytkownika czy stanu logowania. Mają bardzo mały limit (ok. 4 KB). W odróżnieniu od localStorage pliki cookies mają możliwość ustawienia daty wygaśnięcia (choć mogą być również, podobnie jak sesseionStorage, ustawione jako tymczasowe, wtedy znikają po zamknięciu przeglądarki).

Cookiesy są wysyłane automatycznie do serwera przy każdym żądaniu HTTP, dzięki czemu moga wymieniać z nim informacje. Pozwala to stronie rozpoznać użytkownika, sprawdzać, czy jest obecnie zalogowany i na tej podstawie wyświetlić mu odpowiednie treści.

Bezpieczeństwo localStorage

LocalStorage nie jest bezpiecznym miejscem na poufne dane. Wszystkie informacje są zapisywane w postaci jawnego tekstu i można je łatwo podejrzeć w przeglądarce. Dane są dostępne z poziomu JavaScript, więc w przypadku ataku XSS mogą zostać przechwycone. LocalStorage nie oferuje zabezpieczeń takich jak HttpOnly czy Secure, jak ma to miejsce w przypadku cookies. Dlatego najlepiej używać go tylko do przechowywania ustawień interfejsu lub innych mało wrażliwych informacji.