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 wlocalStorage
pod kluczemfavoriteColor
. - Funkcja
loadFavoriteColor()
odczytuje zapisany kolor zlocalStorage
i stosuje go jako kolor tła strony podczas ładowania. Dzięki temu, preferencje kolorystyczne użytkownika są zachowane między sesjami przeglądania.
- Funkcja
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.