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

Zakres: Pliki cookie są dostępne zarówno po stronie klienta, jak i serwera. sessionStorage i localStorage są dostępne tylko po stronie klienta.

Czas życia: Dla plików cookie czas życia jest ustawiany podczas ich tworzenia (za pomocą atrybutu expires lub max-age). Jeśli nie jest określony, plik cookie jest usuwany po zamknięciu przeglądarki. sessionStorage przechowuje dane tylko podczas bieżącej sesji (do zamknięcia karty lub okna). localStorage przechowuje dane bezterminowo, dopóki nie zostaną wyraźnie usunięte.

Rozmiar: Maksymalny rozmiar dla plików cookie to około 4 KB. Dla sessionStorage i localStorage jest to od 5 MB do 10 MB, w zależności od przeglądarki.

Wysyłanie z każdym żądaniem: Pliki cookie są automatycznie wysyłane z każdym żądaniem HTTP do domeny, dla której zostały ustawione, co może zwiększyć ruch. Dane w sessionStorage i localStorage nie są wysyłane do serwera.

Sposób dostępu: Dostęp do plików cookie odbywa się przez document.cookie (łańcuch). Dostęp do sessionStorage i localStorage odbywa się przez odpowiednie obiekty z użyciem metod setItem, getItem, removeItem i clear.

// Ustawianie pliku cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

// Pobieranie pliku cookie
let x = document.cookie;

// Ustawianie danych w sessionStorage
sessionStorage.setItem("lastname", "Smith");

// Pobieranie danych z sessionStorage
let y = sessionStorage.getItem("lastname");

// Ustawianie danych w localStorage
localStorage.setItem("firstname", "Jane");

// Pobieranie danych z localStorage
let z = localStorage.getItem("firstname");

Cecha	cookies	sessionStorage	localStorage
Zakres	Klient i Serwer	Tylko klient	Tylko klient
Czas życia	Ustawiany podczas tworzenia (expires/max-age), lub do zamknięcia przeglądarki	Do zamknięcia karty/okna przeglądarki	Bezterminowo (do ręcznego usunięcia)
Rozmiar	~4 KB	~5-10 MB (w zależności od przeglądarki)	~5-10 MB (w zależności od przeglądarki)
Wysyłanie z żądaniem	Tak	Nie	Nie
Dostęp	document.cookie	sessionStorage.getItem/setItem	localStorage.getItem/setItem