Salvare e ricaricare lo stato

In parole semplici

Se salvi lo stato, l’utente non perde tutto al refresh. Per una piccola app puoi usare localStorage e JSON.

Questa lezione fa parte del modulo Organizzare una piccola app. L’obiettivo del modulo è: Passare da esempi isolati a un progetto con file, dati e funzioni organizzati.

Parole nuove

• salvare: scrivere dati in una memoria.
• ricaricare: leggere quei dati quando la pagina riparte.

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 notes app semplice con file separati e salvataggio locale.

Esempio da copiare

function salva(note) {
  localStorage.setItem("note", JSON.stringify(note));
}

function carica() {
  return JSON.parse(localStorage.getItem("note") || "[]");
}

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

Esercizi

Base · facile

Scrivi salva(note) e carica() che usano localStorage con JSON.stringify/JSON.parse.

function salva(note) {
  localStorage.setItem("note", JSON.stringify(note));
}
function carica() {
  return JSON.parse(localStorage.getItem("note") || "[]");
}

Intermedio · medio

Collega il salvataggio al ciclo: salva dopo ogni modifica e, all’avvio, carica le note e mostrale con render. Ricarica la pagina e verifica che ricompaiano.

Sfida · difficile

Spiega perché serve JSON.stringify/parse (localStorage memorizza solo testo) e cosa accade se i dati salvati sono corrotti o di una vecchia versione. Proponi una piccola gestione difensiva (try/catch attorno al parse) che riparte da una lista vuota in caso di errore.

Controllo finale

Hai finito quando le note ricompaiono dopo il refresh.