Leggere e scrivere in localStorage con React

localStorage è un archivio integrato nel browser con quattro metodi fondamentali: setItem(key, value), getItem(key), removeItem(key) e clear(). I dati persistono dopo i ricaricamenti della pagina e i riavvii del browser.

Si trova nell'oggetto window ed è specifico per ogni origine: ogni dominio dispone di un'area di archiviazione isolata.

Ogni chiamata a localStorage viene eseguita in modo sincrono sul thread principale. La lettura o scrittura di grandi quantità di dati può bloccare il rendering e rendere l'interfaccia poco fluida.

Per questo, mantenga ridotte le dimensioni dei valori memorizzati ed eviti di scrivere a ogni pressione di tasto o evento di scorrimento.

localStorage può contenere solo stringhe. Per memorizzare un oggetto o un array, deve prima serializzarlo con JSON.stringify(value) prima di chiamare setItem.

Se si memorizza direttamente un valore non stringa, questo viene convertito; un oggetto diventa quindi l'inutile stringa [object Object].

Durante la lettura si chiama JSON.parse(localStorage.getItem(key)), ma il parsing può generare un'eccezione se la stringa memorizzata è danneggiata o è stata scritta da un'altra origine.

Racchiuda il parsing in un try/catch e usi un valore predefinito, così una voce non valida non manda in errore il componente.

localStorage non è sempre utilizzabile: durante il rendering lato server window non esiste e alcune modalità di navigazione privata generano un'eccezione durante la scrittura. Protegga l'accesso con un controllo della funzionalità.

Un test sicuro consiste in un try/catch che imposta e rimuove una chiave fittizia, restituendo false se si verifica un'eccezione.

La maggior parte dei browser limita localStorage a circa cinque megabyte per origine. Se si supera questo limite, durante la scrittura viene generato un QuotaExceededError.

Per questo localStorage è adatto a dati di piccole dimensioni, ma non è una buona scelta per immagini, dataset voluminosi o risposte di API memorizzate nella cache.

Sono adatti piccoli elementi non sensibili dell'interfaccia e dello stato dell'utente: la preferenza per il tema, lo stato compresso della barra laterale, gli ultimi filtri utilizzati, i banner ignorati e le bozze non salvate dei moduli.

Sono valori che devono sopravvivere a un ricaricamento, ma che non richiedono un viaggio di andata e ritorno al server.

Eviti di memorizzare segreti come token o password, perché qualsiasi script presente nella pagina può leggere localStorage, rendendolo vulnerabile a XSS. Eviti inoltre oggetti di grandi dimensioni e lo stato autorevole del server.

I dati sensibili di autenticazione appartengono a cookie httpOnly, mentre i dati canonici appartengono al server.

Entrambi espongono la stessa API, ma sessionStorage viene cancellato quando si chiude la scheda e non è condiviso tra le schede. localStorage persiste indefinitamente ed è condiviso da tutte le schede della stessa origine.

Scelga sessionStorage per dati di breve durata specifici della scheda e localStorage per preferenze persistenti.

I cookie sono di piccole dimensioni e vengono inviati con ogni richiesta HTTP: questo è adatto all'autenticazione, ma spreca larghezza di banda per i dati generici. IndexedDB è un database asincrono per dati strutturati di grandi dimensioni, ben oltre il limite di 5 MB.

Scelga i cookie per l'autenticazione letta dal server, localStorage per le piccole preferenze del client e IndexedDB per dati grandi o complessi.

Un helper minimo scrive con localStorage.setItem(key, JSON.stringify(value)) e legge con un try/catch protetto attorno a JSON.parse(localStorage.getItem(key)), restituendo un valore predefinito in caso di errore.

Questo piccolo wrapper centralizza la serializzazione e la gestione degli errori.

Ha imparato a usare l'API localStorage e ha visto che è sincrona, accetta solo stringhe e ha un limite vicino a 5 MB; ha inoltre imparato a eseguire il parsing in modo sicuro e a verificare la disponibilità per SSR e modalità privata.

Ha anche confrontato localStorage con sessionStorage, i cookie e IndexedDB per scegliere il sistema di archiviazione più adatto.