Ottenere, impostare e rimuovere elementi

Sia localStorage sia sessionStorage espongono gli stessi quattro metodi fondamentali: getItem(key), setItem(key, value), removeItem(key) e clear(). Sono semplici archivi chiave-valore gestiti dal browser.

localStorage.setItem("theme", "dark") memorizza in modo persistente una stringa con la chiave "theme". Sia la chiave sia il valore devono essere stringhe; i valori non stringa vengono convertiti tramite String() prima della memorizzazione, corrompendo silenziosamente oggetti e array.

Per memorizzare dati strutturati, li serializzi con JSON: localStorage.setItem("user", JSON.stringify(user)). Per leggerli nuovamente: const user = JSON.parse(localStorage.getItem("user")). Racchiuda sempre l'analisi in try/catch, nel caso in cui il valore memorizzato sia malformato.

getItem("missing") restituisce null quando la chiave non esiste, mai undefined. Utilizzi l'operatore di coalescenza nullish per fornire valori predefiniti: const theme = localStorage.getItem("theme") ?? "light".

Può utilizzare anche la notazione con parentesi quadre e quella con il punto: localStorage.theme = "dark" e localStorage["theme"]. Entrambe funzionano, ma rendono meno chiara l'intenzione. Preferisca le chiamate esplicite ai metodi, che comunicano chiaramente che si tratta di storage persistente e non di una proprietà di un oggetto.

localStorage.removeItem("theme") elimina una singola chiave. localStorage.clear() elimina tutte le chiavi dell'origine corrente. clear() è distruttivo: non lo chiami mai senza una valida ragione, perché rimuove i dati impostati da ogni script presente nella pagina.

Utilizzi localStorage.length e localStorage.key(index) per scorrere tutte le chiavi memorizzate, oppure espanda Object.keys(localStorage). È utile per le migrazioni, il debugging e la pulizia basata su prefissi, ad esempio per rimuovere tutte le chiavi che iniziano con "cache:".

I browser allocano circa 5-10 MB per origine. Il superamento della quota genera un QuotaExceededError. Racchiuda setItem in try/catch quando memorizza valori potenzialmente grandi, come cache di immagini o bozze di documenti, in modo che l'errore non provochi l'arresto dell'applicazione.

Lo storage è condiviso da tutta l'origine. Aggiunga alle chiavi il prefisso del nome dell'app o della funzionalità (app:settings, cart:items) per evitare conflitti con altri script, librerie di terze parti ed estensioni del browser eseguiti sulla stessa origine.

La Storage API è completamente sincrona: ogni chiamata blocca il thread principale finché l'I/O su disco non è completato. Eviti di memorizzare blob molto grandi o di chiamare setItem all'interno di cicli stretti; raggruppi invece gli aggiornamenti in un singolo oggetto serializzato.

La stessa superficie dell'API, ma una durata diversa. sessionStorage viene cancellato alla chiusura della scheda; localStorage persiste tra i riavvii del browser. Scelga sessionStorage per lo stato effimero di una procedura guidata e localStorage per le preferenze dell'utente che devono sopravvivere a un aggiornamento.

Che cosa restituisce localStorage.getItem("missing-key") quando la chiave non è mai stata impostata?

getItem, setItem, removeItem e clear sono i quattro pilastri della Web Storage. I valori sono sempre stringhe, quindi racchiuda i dati strutturati in JSON. Preveda restituzioni null, QuotaExceededError e l'uso di namespace per condividere correttamente l'origine con gli altri script.