[JavaScript] Przechowywanie danych lokalnie przy użyciu localStorage

Wraz z rozwojem technologii internetowych, coraz częściej spotykamy się z potrzebą przechowywania danych po stronie klienta. W HTML5 został wprowadzony mechanizm localStorage, który umożliwia przechowywanie danych w przeglądarce użytkownika. W tym artykule przyjrzymy się bliżej temu mechanizmowi i przedstawimy praktyczny przykład jego użycia.

LocalStorage to mechanizm, który umożliwia przechowywanie danych w przeglądarce internetowej. Dane zapisane przy użyciu localStorage są trwałe i dostępne nawet po zamknięciu przeglądarki. Możemy przechowywać różne rodzaje danych, takie jak tekst, liczby, obiekty JavaScript itp.

Zapisywanie danych

Aby zapisać dane przy użyciu localStorage, możemy skorzystać z metody setItem(). Przykładowo, jeśli chcemy zapisać jakiś kolor, możemy użyć poniższego kodu:

localStorage.setItem('color', '#000000');

Odczytywanie danych

Aby odczytać dane zapisane w localStorage, możemy skorzystać z metody getItem(). Kontynuując nasz przykład, odczytanie koloru wyglądałoby tak:

let color = localStorage.getItem('color');
alert(name); // Wyświetli "#000000"

Modyfikowanie danych

Jeśli chcemy zmienić wartość zapisaną w localStorage, wystarczy ponownie użyć metody setItem() z nową wartością. Na przykład, jeśli chcemy zmienić kolor na "#ffffff", możemy użyć poniższego kodu:

localStorage.setItem('color', '#ffffff');

Usuwanie danych

Aby usunąć dane zapisane w localStorage, możemy skorzystać z metody removeItem(). Na przykład, jeśli chcemy usunąć zapisany kolor, możemy użyć poniższego kodu:

localStorage.removeItem('color');

Przykład użycia

Przyjrzyjmy się praktycznemu przykładowi, w którym wykorzystamy localStorage do przechowywania preferencji użytkownika dotyczących motywu strony. Załóżmy, że tworzymy stronę, która ma opcję jasnego i ciemnego motywu. Po wyborze motywu przez użytkownika, możemy zapisać tę informację w localStorage w celu pamiętania preferencji po odświeżeniu strony. Poniżej znajduje się kod JavaScript, który pokazuje, jak to zrobić:

// Pobranie elementu przycisku motywu
let themeButton = document.getElementById('theme-button');

// Dodanie nasłuchiwania na kliknięcie przycisku
themeButton.addEventListener('click', function() {

  // Sprawdzenie, jaki motyw jest obecnie wybrany
  let currentTheme = localStorage.getItem('theme');
  
  // Jeśli motyw to "light", zmień go na "dark" i zapisz w localStorage
  if(currentTheme === 'light') {
  
    localStorage.setItem('theme', 'dark');
    
  } 
  // W przeciwnym razie zmień motyw na "light" i zapisz w localStorage
  else {
  
    localStorage.setItem('theme', 'light');
    
  }
  
});

// Sprawdzenie, jaki motyw jest zapisany w localStorage i zastosowanie go na stronie
let savedTheme = localStorage.getItem('theme');
if(savedTheme) {

  document.body.className = savedTheme;
  
}

Kilka słów na koniec

LocalStorage w HTML5 jest przydatnym mechanizmem, który umożliwia przechowywanie danych lokalnie w przeglądarce. W tym artykule przedstawiliśmy wprowadzenie do localStorage, omówiliśmy metody zapisywania, odczytywania, modyfikowania i usuwania danych oraz zaprezentowaliśmy praktyczny przykład jego użycia. Dzięki localStorage możemy tworzyć bardziej interaktywne i spersonalizowane aplikacje internetowe, które zapamiętują preferencje użytkownika nawet po zamknięciu przeglądarki.