Czym jest Web Storage w JavaScript?

By /

JavaScript

Web Storage to funkcja przeglądarki internetowej, która umożliwia stronom internetowym przechowywanie danych lokalnie na urządzeniu użytkownika. Jest to mechanizm używany do przechowywania par klucz-wartość i jest bardziej zaawansowany niż tradycyjne ciasteczka (cookies), oferując większą pojemność przechowywania oraz lepsze mechanizmy bezpieczeństwa. Web Storage obejmuje dwa główne rodzaje magazynowania: localStorage i sessionStorage.

  • localStorage przechowuje dane bez daty wygaśnięcia. Dane nie zostaną usunięte, gdy użytkownik zamknie przeglądarkę i będą dostępne między sesjami przeglądania.
  • sessionStorage przechowuje dane tylko na czas trwania sesji strony. Dane są usuwane, gdy użytkownik zamknie kartę lub przeglądarkę.

Przykład użycia Web Storage

W poniższym przykładzie pokażemy, jak używać localStorage do przechowywania informacji o użytkowniku na stronie internetowej.

Prosty formularz HTML
<!DOCTYPE html>
<html>
<head>
    <title>Przykład Web Storage</title>
</head>
<body>
    <label for="username">Nazwa użytkownika:</label>
    <input type="text" id="username" name="username">
    <button onclick="saveUsername()">Zapisz</button>
    <p id="message"></p>

    <script src="script.js"></script>
</body>
</html>
JavaScript: Użycie localStorage
// Funkcja do zapisywania nazwy użytkownika
function saveUsername() {
    const username = document.getElementById('username').value;
    // Zapisywanie w localStorage
    localStorage.setItem('username', username); 
    displayMessage();
}

// Funkcja do wyświetlania wiadomości powitalnej
function displayMessage() {
    // Odczytywanie z localStorage
    const savedUsername = localStorage.getItem('username'); 
    if (savedUsername) {
        document.getElementById('message').innerText = 
                                    `Witaj, ${savedUsername}!`;
    } else {
        document.getElementById('message').innerText = 
                                    'Witaj, nieznajomy!';
    }
}

// Wywołanie displayMessage przy załadowaniu strony, 
// aby sprawdzić, czy użytkownik jest już zapisany.
window.onload = function() {
    displayMessage();
}

W tym przykładzie, gdy użytkownik wpisze swoją nazwę użytkownika i kliknie przycisk “Zapisz”, jego nazwa użytkownika jest zapisywana w localStorage. Następnie, przy każdym kolejnym załadowaniu strony, skrypt sprawdza, czy nazwa użytkownika została zapisana, i wyświetla odpowiednią wiadomość powitalną.

Podsumowanie

Web Storage w JavaScript oferuje wygodny sposób na lokalne przechowywanie danych w przeglądarce użytkownika. Dzięki wykorzystaniu localStorage i sessionStorage, strony internetowe mogą zachować informacje między sesjami przeglądania lub na czas trwania pojedynczej sesji, co zwiększa użyteczność i personalizację użytkownika. Mechanizm ten jest szczególnie przydatny w aplikacjach webowych wymagających przechowywania danych bez konieczności ciągłego odpytywania serwera.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

 

Powiązane artykuły

Scroll to Top