Web Storage w HTML5

Web Storage, wprowadzony w HTML5, jest ważnym aspektem współczesnego rozwoju stron internetowych, pozwalającym na bezpieczne przechowywanie danych po stronie klienta. Web Storage oferuje dwie główne formy przechowywania: localStorage i sessionStorage, które umożliwiają webowym aplikacjom na zapisywanie i odczytywanie danych bez angażowania serwera. To rozwiązanie zwiększa wydajność aplikacji, zmniejsza obciążenie serwera i zapewnia lepsze doświadczenia użytkownika, umożliwiając na przykład zachowanie stanu sesji użytkownika lub preferencji na przeglądarce.

Przykład użycia Web Storage

Poniższy przykład demonstruje prosty sposób wykorzystania localStorage do zapisywania i odczytywania preferencji użytkownika, takich jak ulubiony kolor tła strony.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Użycie Web Storage w HTML5</title>
</head>
<body>
    <h3>Wybierz swój ulubiony kolor tła:</h3>
    <button onclick="changeBackground('lightblue')">Jasnoniebieski</button>
    <button onclick="changeBackground('lightgreen')">Jasnozielony</button>
    <button onclick="changeBackground('salmon')">Łososiowy</button>

    <script>
        // Funkcja zmieniająca kolor tła i zapisująca wybór w localStorage
        function changeBackground(color) {
            document.body.style.backgroundColor = color;
            // Zapisz wybrany kolor jako ulubiony kolor użytkownika
            localStorage.setItem('favoriteColor', color);
        }

        // Funkcja sprawdzająca, czy użytkownik ma ulubiony kolor
        function loadFavoriteColor() {
            const favoriteColor = localStorage.getItem('favoriteColor');
            if(favoriteColor) {
                document.body.style.backgroundColor = favoriteColor;
            }
        }

        // Wywołanie funkcji przy ładowaniu strony
        window.onload = loadFavoriteColor;
    </script>
</body>
</html>

Opis kodu

  • HTML: Strona zawiera trzy przyciski, każdy odpowiadający innemu kolorowi tła. Użytkownik może wybrać swój ulubiony kolor, klikając na jeden z nich.
  • JavaScript:
    • Funkcja changeBackground(color) zmienia kolor tła strony na wybrany przez użytkownika i zapisuje ten wybór w localStorage pod kluczem favoriteColor.
    • Funkcja loadFavoriteColor() odczytuje zapisany kolor z localStorage i stosuje go jako kolor tła strony podczas ładowania. Dzięki temu, preferencje kolorystyczne użytkownika są zachowane między sesjami przeglądania.

Podsumowanie

Web Storage w HTML5 oferuje potężne narzędzia do przechowywania danych po stronie klienta, umożliwiając tworzenie bardziej interaktywnych i personalizowanych aplikacji webowych. Użycie localStorage i sessionStorage pozwala na efektywne zarządzanie danymi bez obciążania serwera, co przekłada się na szybsze i bardziej responsywne aplikacje. Przykład powyżej ilustruje podstawowe użycie localStorage do poprawy doświadczeń użytkownika poprzez personalizację interfejsu strony internetowej.

Poprzedni
Następny
Scroll to Top