• Post last modified:06/04/2020
  • Reading time:5 mins read
  • Post comments:1 Komentarz

W dzisiejszym artykule zastanowimy się nad tym czym jest Local Storage oraz gdzie i jak należy go używać. Temat jest stosunkowo łatwy i przyjemny. Jeżeli dopiero zaczynasz swoją przygodę z front endem, to po przeczytaniu tego artykułu na pewno dostrzeżesz wiele nowych możliwości.

Czym jest Local Storage?

Jak sama nazwa wskazuje, jest pewnego rodzaju „magazynem danych” w przeglądarce. Możemy z niego korzystać w naszych aplikacjach webowych. Z racji tego, iż aplikacja taka będzie napisana w JavaScript dane w tym przypadku będą przechowywane w formacie key-value. Dokładnie tak jak ma to miejsce w przypadku obiektów JavaScript:

data = {
  name: "Kamil",
  frontend: true,
  age: 29
}

W takim razie po co nam w ogóle potrzebne coś takiego? Przecież możemy równie dobrze zawrzeć to w kodzie naszej aplikacji.

Otóż największą zaletą tego lokalnego magazynu danych jest to, iż dane te zapisujemy w pamięci przeglądarki osoby odwiedzającej naszą stronę. Co więcej, dane te są zachowywane w przeglądarce nawet po jej zamknięciu. Tak więc aplikacja ma dostęp do zapisanych informacji nawet wtedy, gdy użytkownik zdecyduje się później wrócić na naszą stronę. Chyba, że wcześniej z poziomu ustawień przeglądarki zdecyduje się on na wyczyszczenie danych. Na to jednak nic nie poradzimy.

W jakim celu możemy więc wykorzystywać ten mechanizm:

  • zapisywanie postępów w prostych grach w których nie wymagamy rejestracji/logowania użytkownika,
  • zapisywanie informacji o tym, na jakim etapie użytkownik jest w różnego rodzaju samouczkach,
  • oznaczenie użytkowników, którzy kliknęli w nowy feature na naszej stronie,
  • określanie, czy użytkownik jest zalogowany przy ponownym otwarciu przeglądarki,
  • przenoszenie danych pomiędzy podstronami aplikacji (chociaż zdecydowanie lepszym rozwiązaniem jest tutaj użycie bibliotek do zarządzania stanem, np. Redux).

Informacje trzymane w Local Storage są dostępne per domena. Dane zapisane przez domenę frontstack.pl nie będą mogły być odczytane przez kod na stronie example.com. Nawet gdy w naszej przeglądarce będziemy mieli otwarte w dwóch kartach obie w/w strony.

Jak używać Local Storage

Dostęp do Local Storege jest możliwy poprzez tzw. „WEB Storage API” przeglądarki. Ważną rzeczą o której musimy pamiętać jest fakt, iż nasze dane, zarówno klucze jak i wartości, muszą być typu  string (dane typu integer są automatycznie konwertowane na string).

Dostęp do Local Storage umożliwia nam 5 głównych metod:

  • setItem(): dodaj klucz i wartość,
  • getItem(): pobierz wartość klucza,
  • removeItem(): usuń klucz i jego wartość,
  • clear(): wyczyść wszystkie dane,
  • key(): podaj liczbę, aby pobrać n-tą wartość.

setItem(key, value)

Pierwsza z metod pozwala nam na zapisywanie danych. Przyjmuje ona dwa argumenty – klucz i wartość. Poprzez klucz możemy później odczytać przypisaną do niego wartość:

window.localStorage.setItem('name', 'Adam Front')

Jak już wcześniej wspomniałem, Local Storage może jedynie przechowywać dane typu string. Jeżeli chcemy przechować tablice albo obiekty, musimy najpierw wykonać na nich konwersję. W tym celu możemy posłużyć się metodą JSON.stringify():

const person = {
  name: "Adam Front",
  position: "developer"
} 

window.localStorage.setItem('user', JSON.stringify(person));

getItem(key)

Dzięki tej metodzie możemy odczytać zapisane przez nas wcześniej dane. W tym przypadku podajemy tylko jeden argument – klucz, dzięki któremu możemy odczytać przypisaną do niego wartość.

window.localStorage.getItem('user')

Wartość jaką otrzymamy z powyższego wyrażenia jest typu string:
 “{“name”:”Adam Front”,”position”:”developer”}”,
więc musimy skonwertować ją ponowne do obiektu:

JSON.parse(window.localStorage.getItem('user'));

removeItem(key)

Gdy zdecydujemy się na usunięcie z Local Storage dowolnej pozycji, możemy zrobić to używając metody removeItem(), przekazując jako argument klucz pozycji do usunięcia. Gdy jako argument podamy nieistniejącą wartość klucza, metoda ta nic nie zrobi (nie pojawią nam się komunikaty błędu).

clear()

Wywołanie tej metody usunie nam wszystkie istniejące elementy z lokalnej pamięci.

key(index)

Metoda ta jest przydatna w przypadku, gdy musimy iterować po kluczach. Pozwala nam podać jako argument numer bądź index elementu Local Storage w celu wyciągnięcia jego nazwy:

const KeyName = window.localStorage.key(index)

length

Dodatkową, bardzo przydatną property jest length – pozwala nam ona sprawdzić, czy posiadamy jakieś dane zapisane w Local Storage: localStorage.length (gdy = 0, nasz Local Storage jest pusty)

Istnieje również możliwość odczytu/zapisu danych w taki sam sposób jak przy typowym obiekcie JavaScript:

window.localStorage.myColor = '#fff09b';
window.localStorage['myColor'] = '#fff09b';

jednak zdecydowanie zaleca się używanie jednej z w/w metod.

Web Storage API umożliwia nam również skorzystanie z SessionStorage. Zachowuje się on niemal dokładnie tak samo jako Local Storage. Jednak dane przechowywane w Session Storage zostają usunięte każdorazowo po zamknięciu okna/karty przeglądarki.

Kompatybilność

Local Storage jest częścią specyfikacji HTML5, dzięki czemu jest dostępna na wszystkich głównych przeglądarkach, włączając w to IE8. Jeżeli jednak chcemy mieć pewność, że przeglądarka naszego użytkownika pozwala nam na skorzystanie z tej funkcjonalności, możemy użyć poniższego kodu:

if (typeof(Storage) !== "undefined") {
    // kod gdy Local Storage jest wspierany 
} else {
    // Brak wsparcia Local Storage
}

Kiedy nie stosować Local Storage

  • nie przechowujmy wrażliwych informacji (hasła, klucze API) w tego typu pamięci,
  • nie jest to technologia, która mogłaby w jakimkolwiek stopniu zastąpić bazę danych,
  • domyślnie, rozmiar przeznaczony na Local Storage przez większość współczesnych przeglądarek to 5MB na domenę,
  • Local Storage jest synchroniczna, czyli wszystkie operacje są wykonywane tylko jedna po drugiej.

Kamil Józwik

Frontend developer👨‍💻 Autor kursów na frontschool.pl, małego narzędzia dla programistów - frontbook.dev oraz kolejnych postów na tym blogu. Ulubiony stos technologiczny to React wraz z TypeScript oraz wszystko, co "nowe" w tym pięknym dynamicznym front end-owym świecie 🙂
Subscribe
Powiadom o
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mateusz
Mateusz
1 rok temu

Kamilu, bardzo fajnie opisane! Będę podrzucał link do wpisu moim podopiecznym!