cat javascript/salvare-e-ricaricare-lo-stato.md

Lezione 49 12 min

Salvare e ricaricare lo stato

Conservare i dati principali e ricostruire la pagina al caricamento.

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.

Esercizio guidato

  1. Scrivi una funzione salva.
  2. Scrivi una funzione carica.
  3. Salva una lista di note.
  4. Ricarica la pagina.
  5. Leggi la lista e mostrala con render.

Controllo finale

Hai finito quando le note ricompaiono dopo il refresh.