Spiega la differenza tra cookies, sessionStorage e localStorage.

Ambito di applicazione: I cookie sono disponibili sia lato client che lato server. sessionStorage e localStorage sono disponibili solo lato client.

Durata: Per i cookie, la durata viene impostata al momento della creazione (usando l'attributo expires o max-age). Se non specificato, il cookie viene eliminato alla chiusura del browser. sessionStorage memorizza i dati solo durante la sessione corrente (fino alla chiusura della scheda o della finestra). localStorage memorizza i dati indefinitamente, fino a eliminazione esplicita.

Dimensione: La dimensione massima per i cookie è di circa 4 KB. Per sessionStorage e localStorage, varia tra 5 MB e 10 MB, a seconda del browser.

Invio con ogni richiesta: I cookie vengono inviati automaticamente con ogni richiesta HTTP al dominio per cui sono stati impostati, il che può aumentare il traffico. I dati in sessionStorage e localStorage non vengono inviati al server.

Modo di accesso: L'accesso ai cookie avviene tramite document.cookie (stringa). L'accesso a sessionStorage e localStorage avviene tramite gli oggetti corrispondenti usando i metodi setItem, getItem, removeItem e clear.

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

// Ottenere cookie
let x = document.cookie;

// Impostare dati in sessionStorage
sessionStorage.setItem("lastname", "Smith");

// Ottenere dati da sessionStorage
let y = sessionStorage.getItem("lastname");

// Impostare dati in localStorage
localStorage.setItem("firstname", "Jane");

// Ottenere dati da localStorage
let z = localStorage.getItem("firstname");

Caratteristica	cookies	sessionStorage	localStorage
Ambito di applicazione	Client e Server	Solo Client	Solo Client
Durata	Impostata al momento della creazione (expires/max-age), altrimenti fino alla chiusura del browser	Fino alla chiusura della scheda o della finestra del browser	Indefinito (fino a eliminazione esplicita)
Dimensione	~4 KB	~5-10 MB (dipende dal browser)	~5-10 MB (dipende dal browser)
Invio con richiesta	Sì	No	No
Accesso	document.cookie	sessionStorage.getItem/setItem	localStorage.getItem/setItem