Salvare dati nel browser con localStorage

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.

Esercizi

Base · facile

Salva un nome con localStorage.setItem, ricarica la pagina e rileggilo con getItem.

localStorage.setItem("nome", "Sara");
// dopo il refresh:
console.log(localStorage.getItem("nome"));   // "Sara"

Intermedio · medio

Salva una lista (array) con JSON.stringify e rileggila con JSON.parse. Spiega perché serve la conversione: localStorage memorizza solo stringhe.

Sfida · difficile

Gestisci il primo avvio quando la chiave non esiste ancora (getItem restituisce null): fornisci un valore di default. Spiega perché localStorage non va usato per dati sensibili e quali limiti ha (dimensione, solo testo, per-dominio).

Controllo finale

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