Salvare dati nel browser con localStorage

Conservare un piccolo dato anche dopo il refresh della pagina.

In parole semplici

localStorage è una memoria semplice del browser. Non va usato per dati sensibili, ma va bene per piccoli esercizi come tema, nome o lista di attività.

Questa lezione fa parte del modulo Rendere interattiva una pagina. L’obiettivo del modulo è: Collegare JavaScript a HTML in modo graduale: selezionare elementi, reagire a eventi, leggere form e salvare dati.

Parole nuove

localStorage: memoria semplice disponibile nel browser.
JSON: formato testuale comodo per salvare liste e oggetti.

Cosa impari

Capire il concetto senza partire da definizioni astratte.
Vedere un esempio piccolo che puoi copiare e modificare.
Collegare l’argomento al risultato del modulo: una todo list semplice che salva le attività nel browser.

Esempio da copiare

const nome = "Sara";
localStorage.setItem("nome", nome);

const nomeSalvato = localStorage.getItem("nome");
console.log(nomeSalvato);

Non devi memorizzare tutto subito. Prima copia l’esempio, fallo funzionare e cambia una cosa alla volta.

Esercizio guidato

Salva un nome con localStorage.setItem.
Ricarica la pagina.
Leggi il nome con getItem.
Stampalo in console.
Cambia chiave e valore.

Controllo finale

Hai finito quando un valore resta disponibile anche dopo il refresh.