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.xyz
Widzimy tabelkę z nagłówkami Klucz i Wartość
5 komend i wszystko zrobisz
Do obsługi Local Storage wystarczą 5 funckje obiektu localStorage
| Metoda | Opis |
|---|---|
| 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.
[bws_pdfprint display=’pdf’]