localStorage vs sessionStorage: la Web Storage API spiegata

La Web Storage API offre al browser due semplici archivi chiave-valore — localStorage e sessionStorage — per conservare piccole quantità di dati sul dispositivo dell'utente. Entrambi condividono esattamente la stessa API; differiscono solo per quanto a lungo vivono i dati e chi può vederli.

L'API condivisa

Entrambi gli oggetti espongono gli stessi cinque metodi, ed entrambi memorizzano solo stringhe:

localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme'); // 'dark'
localStorage.removeItem('theme');
localStorage.clear();                          // wipe everything
console.log(localStorage.length);              // number of keys

Leggere una chiave che non esiste restituisce null, così puoi prevedere un ripiego con ||:

const theme = localStorage.getItem('theme') || 'light';

L'unica vera differenza: la durata

È tutta la decisione in una frase. localStorage persiste finché non lo elimini — sopravvive a ricaricamenti, chiusure di schede e riavvii del browser. sessionStorage vive solo finché esiste la scheda: chiudi la scheda e i dati spariscono, e una seconda scheda sullo stesso sito ottiene un proprio archivio separato.

Memorizzare oggetti: stringify e parse

Poiché lo storage contiene solo stringhe, qualsiasi cosa strutturata deve passare per JSON. Serializza in entrata, analizza in uscita:

const user = { name: 'Ada', loggedIn: true };

// Save
localStorage.setItem('user', JSON.stringify(user));

// Read back
const saved = JSON.parse(localStorage.getItem('user'));
console.log(saved.name); // 'Ada'

Racchiudi JSON.parse in un try/catch quando il valore potrebbe mancare o essere corrotto — analizzare null o testo non valido genera un'eccezione:

function readJSON(key, fallback) {
  try {
    const raw = localStorage.getItem(key);
    return raw ? JSON.parse(raw) : fallback;
  } catch {
    return fallback;
  }
}

Ambito e limite di dimensione

Lo storage è circoscritto all'origin (schema + host + porta): https://example.com e http://example.com non condividono i dati. La quota è all'incirca di 5 MB per origin nella maggior parte dei browser — generosa per preferenze e piccole cache, ma non un database. Superarla fa sì che setItem generi un QuotaExceededError, quindi proteggi le scritture di grandi dimensioni.

Reagire ai cambiamenti tra schede

L'evento storage viene attivato su altre schede dello stesso origin quando localStorage cambia — utile per sincronizzare un logout o un cambio di tema tra le finestre aperte. Nota che non si attiva nella scheda che ha effettuato la modifica, e sessionStorage non lo innesca mai:

window.addEventListener('storage', (event) => {
  if (event.key === 'theme') {
    applyTheme(event.newValue);
  }
});

Quale dovresti usare?

	localStorage	sessionStorage
Durata	Finché non viene cancellato esplicitamente	Finché la scheda non si chiude
Condiviso tra schede	Sì (stesso origin)	No (per scheda)
Sopravvive al ricaricamento	Sì	Sì
Attiva l'evento storage	Sì	No
Uso tipico	Tema, impostazioni, "ricordami"	Bozze di moduli occasionali, passaggi di una procedura guidata

Ricorri a localStorage quando i dati devono restare tra una visita e l'altra, e a sessionStorage quando hanno senso solo per la scheda corrente. Per qualsiasi cosa sensibile — token, password, dati personali — nessuno dei due è appropriato: entrambi sono leggibili da qualsiasi script presente nella pagina, quindi tieni i segreti completamente fuori dal Web Storage.