Wyjaśnij różnicę między cookies, sessionStorage a localStorage.

Mechanizm	Rozmiar (przybliżony)	Czas życia	Dostęp	Przesyłane na serwer	Użycie
Cookies	4 KB	Data wygaśnięcia ustawiona przez serwer lub przeglądarkę	Obecny dokument i subdomeny (w zależności od ustawień)	Przy każdym żądaniu HTTP	Autoryzacja, śledzenie, niestandardowe ustawienia użytkownika
localStorage	5-10 MB	Bezterminowo (dopóki użytkownik nie usunie)	Tylko bieżący origin (protokół, domena, port)	Nie	Przechowywanie ustawień użytkownika, danych stanu aplikacji
sessionStorage	5-10 MB	Do zamknięcia karty/okna przeglądarki	Tylko bieżący origin (protokół, domena, port)	Nie	Tymczasowe przechowywanie danych sesji użytkownika

Cookies:

• Wysyłane z każdym żądaniem HTTP do serwera, co może zwiększyć ruch.
• Główny cel: identyfikacja użytkownika (ciasteczka sesyjne), zapamiętywanie preferencji, śledzenie działań użytkownika.
• Dostępne zarówno po stronie klienta (JavaScript), jak i serwera.
• Mogą być ograniczone przez domenę i ścieżkę.
• Uważane za mniej bezpieczne do przechowywania danych wrażliwych ze względu na automatyczne wysyłanie do serwera.

localStorage:

• Dane przechowywane lokalnie w przeglądarce użytkownika.
• Używane do trwałego przechowywania danych, które nie muszą być wysyłane do serwera przy każdym żądaniu.
• Posiada prosty API JavaScript.
• Dane są przechowywane jako pary klucz-wartość.
• Niedostępne z innych originów.

// Ustawianie wartości
localStorage.setItem('username', 'john.doe');

// Pobieranie wartości
let username = localStorage.getItem('username');

// Usuwanie wartości
localStorage.removeItem('username');

// Czyszczenie całego localStorage
localStorage.clear();

sessionStorage:

• Podobne do localStorage, ale dane są przechowywane tylko do zamknięcia bieżącej karty lub okna przeglądarki.
• Idealne do tymczasowego przechowywania danych związanych z bieżącą sesją użytkownika (np. dane formularza, koszyk).
• Posiada również prosty API JavaScript, podobny do localStorage.
• Dane dostępne tylko w bieżącym origin.

// Ustawianie wartości
sessionStorage.setItem('sessionId', 'abc123');

// Pobieranie wartości
let sessionId = sessionStorage.getItem('sessionId');

// Usuwanie wartości
sessionStorage.removeItem('sessionId');

// Czyszczenie całego sessionStorage
sessionStorage.clear();