localStorage in JavaScript (con Esempi Funzionanti)

localStorage in JavaScript

localStorage in JavaScript: Esempi, JSON, Limiti | We.Inc

Prova localStorage in un playground live, poi copia esempi funzionanti per preferenze salvate, un carrello e un tema, più gestione del JSON, limiti di spazio, errori e sincronizzazione tra tab.

localStorage è un archivio chiave e valore del browser, separato per origine, che conserva i dati anche dopo la chiusura della tab e del browser. Chiami setItem(key, value) per salvare, getItem(key) per leggere, removeItem(key) per eliminare e clear() per svuotarlo. I valori sono sempre stringhe, quindi avvolgi gli oggetti con JSON.stringify e JSON.parse.

Tutta la Storage API in una scheda

Membro
Cosa fa
Restituisce

setItem(key, value)
Aggiunge o sovrascrive una voce

getItem(key)
Legge una voce
La stringa, oppure null se manca

removeItem(key)
Elimina una voce

clear()
Elimina tutte le voci di questa origine

key(index)
Nome della voce in una posizione
Una stringa o null

Quante voci sono memorizzate
Un numero

La maggior parte dei bug con localStorage nasce da tre sorprese: tutto diventa una stringa, la chiamata può lanciare un errore e i dati sono legati a un'unica origine esatta. Il playground qui sotto scrive nel tuo browser così puoi vedere queste regole in azione, poi gli esempi mostrano pattern sicuri per preferenze, un carrello e un cambio di tema.

Scrivi una chiave e un valore nel playground e premi Salva. La voce viene scritta nello storage di questa pagina nel tuo browser.
Premi Leggi per recuperarla, oppure Elimina per rimuoverla. La tabella sotto elenca ogni chiave che questo sito conserva per te.
Imposta il tipo di valore su Oggetto per vedere come JSON.stringify lo trasforma in testo e JSON.parse lo ricostruisce.
Copia qualsiasi esempio qui sotto nel tuo progetto. Ognuno racchiude l'accesso allo storage in try e catch.

Metti un prefisso alle chiavi, per esempio shop:cart, così due script sulla stessa origine non si sovrascrivono a vicenda.
Salva un numero di versione accanto ai dati strutturati, così puoi migrare le vecchie strutture dopo un redesign.
Non tenere mai qui password, token o dati personali. Qualsiasi script in esecuzione sulla pagina può leggere ogni voce.
Leggi una volta all'avvio e tieni il valore in memoria. Ogni chiamata è sincrona e blocca il thread principale.
Usa sessionStorage quando i dati devono sparire appena il visitatore chiude la tab.

Domande frequenti

Quanti dati può contenere localStorage?

MDN indica un limite di 5 MiB di localStorage per origine nei browser attuali, con altri 5 MiB separati per sessionStorage. Le stringhe sono memorizzate in UTF-16, quindi il numero di caratteri che puoi salvare è più basso di quanto suggerisca il conteggio dei byte. Scrivere oltre il limite lancia un QuotaExceededError.

localStorage scade?

No. Le voci restano finché il tuo codice non le rimuove o il visitatore non cancella i dati del sito. In una finestra privata il browser le cancella quando si chiude l'ultima tab privata. Se ti serve una scadenza, salva un timestamp insieme al valore e controllalo quando leggi.

Perché getItem restituisce "[object Object]"?

setItem trasforma in stringa tutto ciò che gli passi. Un oggetto semplice diventa il testo [object Object] e i dati vanno persi. Salva JSON.stringify(obj) e rileggilo con JSON.parse.

localStorage è condiviso tra http e https?

No. Lo storage appartiene a un'origine, cioè schema, host e porta insieme. http://example.com e https://example.com hanno ciascuno il proprio archivio separato, e lo stesso vale per i sottodomini.

Come sincronizzo le modifiche tra le tab del browser?

Ascolta l'evento storage su window. Si attiva negli altri documenti aperti della stessa origine quando uno di essi modifica un valore, e contiene key, oldValue e newValue. La tab che ha fatto la modifica non lo riceve.

localStorage o cookie?

I cookie viaggiano verso il server a ogni richiesta e sono adatti alle sessioni. localStorage non lascia mai il browser, contiene di più ed è adatto allo stato dell'interfaccia, come un tema, una bozza o una barra laterale chiusa.

Quando localStorage è lo strumento giusto

Dà il meglio per piccoli frammenti di memoria dell'interfaccia: l'ultima tab aperta, un banner chiuso, una bozza di messaggio, un'unità di misura preferita. Perdere questi dati è un piccolo fastidio più che un danno, il che rispecchia la facilità con cui le persone li cancellano.
Non è adatto a nulla che non puoi perdere, a nulla che un altro dispositivo debba vedere, né a grandi raccolte di dati. Gli ordini vanno su un server, e i grandi dati strutturati vanno in IndexedDB, che è asincrono.

Perché ogni chiamata ha bisogno di try e catch

I browser lanciano un SecurityError quando lo storage è bloccato, per esempio quando un visitatore ha disattivato i dati dei siti, e le pagine aperte da URL file: si comportano in modo diverso da browser a browser. Un archivio pieno lancia un QuotaExceededError in scrittura.
Un piccolo wrapper che restituisce un valore di riserva in caso di errore mantiene funzionante il resto della pagina. Gli esempi qui sotto usano tutti questa struttura.

Usarlo in sicurezza

Tutto ciò che è nello storage può essere letto da qualsiasi script sull'origine, compreso un widget di terze parti o codice iniettato da un bug di cross-site scripting. Consideralo pubblico per la pagina.
Anche i dati riletti sono input non affidabile. Validali prima di usarli e mostrali come testo, mai come HTML.

localStorage vs sessionStorage vs cookie

Scegli l'archivio in base a quanto devono durare i dati e a chi servono

localStorage
sessionStorage
Cookie

Durata
Finché non viene rimosso
Finché la tab non si chiude
Fino alla data di scadenza

Condiviso tra tab
Sì, stessa origine
No, una sola tab
Sì

Inviato al server
No
No
Sì, a ogni richiesta

Dimensione (dato MDN)
5 MiB per origine
5 MiB per origine
Piccola, limiti fissati da ogni browser

Stile dell'API
Sincrona
Sincrona
Stringa document.cookie

Esempi da copiare

Helper sicuri di lettura e scrittura con JSON

Un unico punto gestisce storage bloccato, quota piena e JSON non valido, così il resto del codice non deve farlo.

Ricordare le preferenze di un visitatore

I valori predefiniti vengono uniti a quanto salvato, quindi aggiungere una nuova impostazione in seguito non rompe i dati salvati in precedenza.

Un piccolo carrello che sopravvive al ricaricamento

Ogni modifica crea un nuovo array e lo riscrive. I prezzi li decide comunque il server al checkout.

Scelta del tema con fallback di sistema

Se non c'è nulla di salvato, vince l'impostazione del sistema operativo. Esegui questo codice presto nell'head per evitare un lampo del tema sbagliato.

Voci che scadono

localStorage non ha una scadenza integrata, quindi salva la scadenza insieme al valore ed elimina le voci vecchie in lettura.

Tenere sincronizzate le tab aperte

L'evento storage raggiunge ogni altra tab sulla stessa origine, così il badge del carrello si aggiorna senza ricaricare.

Lo storage è bloccato in questo browser, quindi ogni chiamata lancerebbe un errore. Il tuo codice ha bisogno di un fallback.

Ha lanciato {name}: {message}

Inserisci prima una chiave.

{call} ha memorizzato {n} caratteri.

{call} ha restituito null: non esiste una voce con quella chiave.

JSON.parse ha restituito: {value}

Il testo memorizzato non è JSON: {value}

{call} ha restituito la stringa {value}

{call} eseguito.

Rimosse {n} voci del playground. Le altre chiavi di questo sito non sono state toccate.

Playground di {name}

Salva, leggi ed elimina voci nel tuo browser e vedi ogni chiave che questo sito memorizza. Le chiavi del playground iniziano con demo: così non entrano mai in conflitto con il sito.

Chiave

Valore

Tipo di valore

Stringa semplice

Oggetto (JSON)

Salva

Leggi

Elimina

Cancella le chiavi del playground

I risultati appaiono qui.

Voci del playground memorizzate nel tuo browser ({n})

Stringa memorizzata

Inizia gratis · Nessuna carta di credito richiesta

Correlati: Guide

Prodotto

Per chi è

Funzionalità

Risorse

Azienda

Mappa del sito