Czym jest localStorage w JavaScript?

By /

JavaScript

localStorage jest częścią Web Storage API, która umożliwia stronom internetowym przechowywanie danych w przeglądarce użytkownika. Dane zapisane za pomocą localStorage są trwałe i dostępne nawet po zamknięciu przeglądarki, co odróżnia je od danych przechowywanych w sessionStorage, które są dostępne tylko podczas trwania sesji przeglądarki. localStorage jest często wykorzystywany do zapisywania preferencji użytkownika, informacji o stanie aplikacji lub innych danych, które mają być zachowane między sesjami.

Przykład użycia localStorage w JavaScript

W tym przykładzie pokażemy, jak używać localStorage do zapisywania, odczytywania i usuwania danych użytkownika.

Kod html:

<!DOCTYPE html>
<html>
<head>
    <title>Przykład localStorage</title>
</head>
<body>
    <input type="text" id="userData" placeholder="Wpisz coś...">
    <button onclick="saveData()">Zapisz dane</button>
    <button onclick="loadData()">Załaduj dane</button>
    <button onclick="clearData()">Wyczyść dane</button>

    <script src="script.js"></script>
</body>
</html>
Kod JavaScript (script.js)
// Funkcja zapisująca dane do localStorage
function saveData() {
    const data = document.getElementById('userData').value;
    localStorage.setItem('userInput', data); // Zapis danych
    alert('Dane zostały zapisane');
}

// Funkcja ładowania danych z localStorage
function loadData() {
    const data = localStorage.getItem('userInput'); // Odczyt danych
    if (data) {
        document.getElementById('userData').value = data;
        alert('Dane zostały załadowane');
    } else {
        alert('Brak danych do załadowania');
    }
}

// Funkcja czyszcząca dane z localStorage
function clearData() {
    localStorage.removeItem('userInput'); // Usuwanie danych
    alert('Dane zostały wyczyszczone');
}

Jak działa localStorage?

  • Zapisywanie danych: localStorage.setItem('klucz', 'wartość') pozwala na zapisanie danych w localStorage. Dane są przypisywane do unikalnego klucza, który służy do ich identyfikacji.
  • Odczytywanie danych: localStorage.getItem('klucz') umożliwia odczytanie danych na podstawie klucza. Jeśli klucz istnieje, funkcja zwraca przypisaną mu wartość.
  • Usuwanie danych: localStorage.removeItem('klucz') pozwala na usunięcie pary klucz-wartość z localStorage.
  • Czyszczenie wszystkich danych: localStorage.clear() usuwa wszystkie dane zapisane w localStorage dla danej domeny.

Podsumowanie

localStorage jest potężnym narzędziem dla deweloperów webowych, pozwalającym na trwałe przechowywanie danych na poziomie przeglądarki. Umożliwia to tworzenie bardziej interaktywnych i użytkowych aplikacji webowych, które mogą zapamiętywać informacje o użytkowniku i preferencje między sesjami. Ważne jest, aby używać localStorage rozważnie, mając na uwadze prywatność i bezpieczeństwo przechowywanych danych.

 

 

Powiązane artykuły

Scroll to Top