Local Storage — Pamięć lokalna w JS

Przenieśmy się na początki internetu, tam, aby „gdzieś” zapisać dane, które użytkownik generował, więc we wczesnych dziejach odbywało się to wszystko po stronie serwera, który to zapisywał do bazy danych. Ale wraz z rozwojem HTML deweloperzy dodali do niego tytułowy Local Storage.

Aczkolwiek wraz z pamięcią lokalną pojawiła się pamięć sesyjna (session storage), różnicą jedyną jest to, że pamięć sesyjna jest usuwana wraz z zamknięciem karty przeglądarki.

Czym jest ten Local Storage?

Jak wspomniano wcześniej, LocalStorage to forma przechowywania danych w sieci udostępniana przez przeglądarkę, która umożliwia aplikacjom internetowym przechowywanie danych lokalnie w przeglądarce użytkownika bez daty wygaśnięcia. Tutaj przechowywane dane pozostaną dostępne nawet po zamknięciu karty/okna przeglądarki.

Pamiętaj, że dane przechowywane w LocalStorage są zachowywane tylko w przeglądarce użytkownika na urządzeniu, z którego korzystał w celu uzyskania dostępu do witryny. W związku z tym użytkownicy nie mogą uzyskać dostępu do przechowywanych danych, jeśli później ponownie odwiedzą tę samą witrynę za pomocą innej przeglądarki lub na innym urządzeniu.

Kiedy warto z niej korzystać

Buforowanie danych

Buforowanie odnosi się do przechowywania danych, aby przyszłe zapytania dotyczące tych informacji były przetwarzane szybciej i z mniejszym obciążeniem serwera. Odbywa się to po stronie przeglądarki, ale bez dodatkowego zapytania serwera

Do przechowywania częściowo uzupełnionego formularza

Użytkownik wypełnia bardzo długi formularz i nagle stracił dostęp do internetu, zamiast ponownego uzupełnia formularza pokazujesz mu zapisane dane w przeglądarce i gdy wróci internet może wysłać ten formularz.

Jak podejrzeć przeglądarkową bazę danych?

Na dowolnej stronie naciśnij F12 i przejdź do zakładki Aplikacja, tam zobaczysz Pamięć i w niej Pamięć Lokalna, następnie rozwiń pamięć lokalną i tam będzie adres strony. Do testów i nauki możesz użyć strony https://kry008.ml

Widzimy tabelkę z nagłówkami Klucz i Wartość

5 komend i wszystko zrobisz

Do obsługi Local Storage wystarczą 5 funckje obiektu localStorage

MetodaOpis
setItem(“klucz”, “wartość”)Zapisywanie danych pod danym kluczem
getItem(“klucz”)Odczytywanie danych z podanego klucza
removeItem(“klucz”)Usuwanie danych i klucz
key(indeks)Aby pobrać dane z LocalStorage pod określonym indeksem
clear()Czyszczenie całego Local Storage

To wszystko, co potrzeba, czasem może się przydać jeszcze JSON.stringify() aby zapisać obiekt JSON do zwykłego tekstu oraz JSON.parse() aby odwrócić ten proces.

Przykład działania

Teraz zobaczysz jak po wykonaniu każdej metody zmieniał się nam Local Storage

localStorage.setItem("name", "Adam");
localStorage.setItem("surname", "Małysz");
localStorage.getItem("name");

A teraz spróbujmy wywołać sam obiekt localStorage

localStorage.removeItem("name");

i ostatnia metoda

localStorage.clear()

I mamy w pełni wyczyszczony localStorage danej strony.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *