Wprowadzenie. Czym jest Local Storage?

Kod aplikacji w wersji 0. oraz 1. działa, aczkolwiek przechowuje dane (nasze zadania) tylko w trakcie sesji użytkownika w przeglądarce lub do momentu odświeżenia strony lub pliku z kodem. Gdybyśmy zrobili naszą aplikację tak, jak się to robi w prawdziwym świecie, to wykorzystalibyśmy bazy danych do przechowywania naszych zadań. Przechowywalibyśmy tam także dane użytkowników, którzy by z niej korzystali.

Dzięki bazom danych aplikacje mają dostęp do danych niezależnie od tego, na jakim urządzeniu korzysta się z aplikacji (w naszej aplikacji dane są dostępne tylko w tej konkretnej przeglądarce... a na telefonie to w ogóle nie działa). Ale są to zaawansowane tematy (mam nadzieję, że dojdziemy do nich w kolejnych kursach na kodujemywbiurze.pl - wszystko zależy od Was!).

Niemniej jednak, możemy doświadczyć, jak to jest pracować z bazą danych, dzięki wbudowanemu narzędziu każdej przeglądarki - localStorage. localStorage jest czymś w rodzaju magazynu, w którym możemy przechowywać pewne ilości danych w formie tekstowej (a dokładnie 5 MB - nie za wiele, ale nam wystarczy).

Chciałbym tylko od razu zaznaczyć, że localStorage przechowuje osobne zestawy danych dla każdego adresu url, co znaczy, że jak wdrożymy to rozwiązanie, to zadania zapisane w trakcie korzystania ze strony kodujemywbiurze.pl będą możliwe do odczytania tylko na tej stronie.

Jeśli z kolei będziemy korzystać z aplikacji na jakiejś innej stronie, np. vadimgierko.com, to tam będą przechowywane inne zadania, czyli teoretycznie mógłbyś/ mogłabyś odpalać plik todo-app na każdej stronie w Internecie i na każdej z nich przechowywać i modyfikować inne zestawy zadań (ale kod pozostaje taki sam i funkcjonuje w ten sam sposób).

Ok, wpisz więc do konsoli localStorage i kliknij Enter. Jeśli po raz pierwszy masz do czynienia z localStorage na tej stronie (nie robiłeś/aś wcześniej tego kursu), to wyświetli Ci się to: Storage {theme: 'dark', length: 1}. Ten komunikat pokazuje zawartość obiektu Storage (nie omawialiśmy jeszcze obiektów, ale jest to zestaw kluczy i wartości zawartych pomiędzy klamrami {}, np. {firstName: "Vadim", lastName: "Gierko"}), który jak na razie przechowuje jedynie preferowany przez Ciebie tryb (jasny lub ciemny).

Tak, zgadza się, w tajemnicy przed Tobą przechowuję za pomocą localStorage to, czy korzystasz z ciemnego czy jasnego trybu na swoim urządzeniu lub czy samodzielnie zmieniłeś tryb wyświetlania na tej stronie klikając w ikonkę księżyca lub słońca w górnym menu. Jak widzisz, localStorage jest bardzo przydatny dla twórców stron, kiedy sięganie do bazy danych z prawdziwego zdarzenia jest zbyt dużym overkillem.