Controllare persistenza localStorage o JSON

Questa lezione appartiene al Modulo 16 — Preparazione alla presentazione.

Il lavoro continua il progetto guida, il Registro del laboratorio scolastico. In questa lezione impari a ispezionare i dati in localStorage con gli strumenti del browser e a diagnosticare problemi di persistenza prima che diventino errori durante la demo.

Obiettivo della lezione

Verificare manualmente che i dati del Registro vengano salvati e letti correttamente da localStorage. Saper aprire DevTools, trovare le chiavi del Registro, leggere i valori, e diagnosticare dati mancanti o corrotti.

Alla fine devi avere: una procedura documentata per verificare lo stato di localStorage e almeno un caso di dato anomalo diagnosticato e corretto.

Dove vivono i dati nel browser

localStorage è un dizionario chiave-valore permanente nel browser. I dati rimangono anche dopo la chiusura della scheda. Il Registro usa due chiavi principali:

• "registro_strumenti" — contiene un array JSON degli strumenti
• "registro_prestiti" — contiene un array JSON dei prestiti

Per ispezionarle: apri DevTools (F12 o Cmd+Opt+I), vai in Application → Storage → Local Storage → seleziona l’origine del tuo progetto.

Come leggere i dati in console

Puoi anche ispezionare i dati direttamente dalla console del browser:

// in console del browser
const raw = localStorage.getItem("registro_strumenti");
console.log(raw); // stringa JSON grezza

const parsed = JSON.parse(raw);
console.log(parsed); // array di oggetti
console.log(parsed.length); // numero di strumenti

// cerca uno strumento specifico
parsed.find(s => s.id === "s1");

// verifica gli stati
parsed.filter(s => s.status === "in-prestito");

Nel Registro del laboratorio

Un problema comune: registri uno strumento ma dopo il ricaricamento della pagina non appare. Le cause possibili sono tre:

• il salva non viene chiamato (errore silenzioso nel caso d’uso)
• la chiave localStorage usata in salva è diversa da quella usata in caricaTutti
• il JSON è corrotto (ad esempio, un errore di encoding ha rotto la stringa)

Procedura guidata

1. Esegui un’operazione nel Registro (es. registra uno strumento).
2. Apri DevTools → Application → Local Storage.
3. Trova la chiave "registro_strumenti" e leggi il valore.
4. Verifica che il nuovo strumento sia presente nell’array.
5. Ricarica la pagina e verifica che i dati siano ancora presenti.
6. Prova a corrompere manualmente il JSON per vedere come reagisce il sistema.

Attività in classe

Compila questa scheda durante la verifica:

## Verifica persistenza localStorage

Chiave verificata: registro_strumenti
Numero di record presenti: __
Struttura del primo record: (copia un oggetto qui)

Operazione eseguita: registra uno strumento "Amperometro"
Chiave aggiornata dopo l'operazione: sì / no
Dato trovato in localStorage: sì / no

Ricaricamento pagina: i dati sono rimasti? sì / no

Test dato corrotto: cosa ho fatto e come ha risposto il sistema:

Spiegazione guidata per studiare

Il problema più comune con localStorage è la discrepanza tra la chiave usata per scrivere e quella usata per leggere. Se salva usa "strumenti" e caricaTutti usa "registro_strumenti", i dati vengono scritti ma non vengono mai riletti. DevTools mostra entrambe le chiavi — vedrai subito il problema.

Il secondo problema comune è il JSON corrotto. Può succedere se il salvataggio viene interrotto a metà, se si scrive una stringa non valida, o se si modifica il dato a mano in DevTools commettendo un errore di sintassi. Il sistema deve gestire questo caso nel caricaTutti con un try/catch attorno al JSON.parse.

Passo per passo nel progetto

1. Apri il Registro nel browser e apri DevTools (F12).
2. Vai in Application → Storage → Local Storage → localhost (o il tuo indirizzo).
3. Dovresti vedere le chiavi del Registro. Se non ci sono, i dati non sono stati ancora salvati.
4. Esegui una operazione (es. presta uno strumento) e aggiorna la visualizzazione in DevTools (click sul tasto di refresh accanto alla chiave).
5. Leggi il valore della chiave: è un array JSON valido?
6. Apri la console e verifica manualmente:

// verifica struttura dati
const strumenti = JSON.parse(localStorage.getItem("registro_strumenti") ?? "[]");
console.log("Strumenti salvati:", strumenti.length);
strumenti.forEach(s => console.log(s.id, s.name, s.status));

const prestiti = JSON.parse(localStorage.getItem("registro_prestiti") ?? "[]");
console.log("Prestiti salvati:", prestiti.length);
prestiti.forEach(p => console.log(p.id, p.strumentoId, p.dataChiusura));

1. Prova a corrompere un dato: in DevTools, modifica il valore della chiave "registro_strumenti" e togli una parentesi graffa. Ricarica la pagina. Il sistema si blocca o gestisce il dato corrotto?

Un sistema robusto gestisce il JSON corrotto senza bloccarsi:

// infrastructure/archivioStrumentiLocalStorage.js — versione robusta
export function caricaTutti() {
  try {
    const raw = localStorage.getItem("registro_strumenti");
    if (!raw) return [];
    const dati = JSON.parse(raw);
    if (!Array.isArray(dati)) {
      console.warn("Formato inatteso in registro_strumenti — reset");
      return [];
    }
    return dati.map(dtoToStrumento);
  } catch (errore) {
    console.error("Dati corrotti in localStorage:", errore.message);
    return [];
  }
}

1. Verifica che la chiave usata in salva corrisponda esattamente a quella in caricaTutti:

// controlla le chiavi — devono essere uguali
localStorage.setItem("registro_strumenti", ...) // in salva
localStorage.getItem("registro_strumenti")       // in caricaTutti

Esempio JS — diagnostica completa in console

// script di diagnostica — incollalo in console del browser

function diagnosticaLocalStorage() {
  const chiavi = ["registro_strumenti", "registro_prestiti"];

  chiavi.forEach(chiave => {
    const raw = localStorage.getItem(chiave);
    if (!raw) {
      console.warn(`${chiave}: chiave non trovata`);
      return;
    }
    try {
      const dati = JSON.parse(raw);
      if (!Array.isArray(dati)) {
        console.error(`${chiave}: non è un array`);
        return;
      }
      console.log(`${chiave}: ${dati.length} record`);
      if (dati.length > 0) {
        console.log(`${chiave}: primo record:`, dati[0]);
      }
    } catch (errore) {
      console.error(`${chiave}: JSON non valido — ${errore.message}`);
    }
  });
}

diagnosticaLocalStorage();

Prova di comprensione

Rispondi per iscritto:

• Qual è il percorso esatto in DevTools per vedere i dati di localStorage?
• Cosa succede nel tuo sistema se la chiave "registro_strumenti" non esiste in localStorage?
• Come distingui un dato mancante (chiave non trovata) da un dato corrotto (JSON non valido)?
• Se le chiavi in salva e caricaTutti sono diverse, come lo scopriresti con DevTools?

Errori da evitare

• non verificare mai i dati in localStorage e scoprire i problemi solo durante la demo;
• usare chiavi diverse in salva e caricaTutti (errore di battitura comune);
• non gestire il caso JSON.parse(null) — restituisce null, non lancia errore, ma poi null.map(...) crasha;
• dimenticare che localStorage è condiviso tra tutte le schede dello stesso dominio.

Prodotto da consegnare

La scheda di verifica compilata con i dati reali del Registro e almeno un esempio di dato anomalo diagnosticato. Come verifica: mostra DevTools con i dati del Registro e spiega cosa contiene ogni chiave.

Checklist di chiusura

• ho trovato le chiavi del Registro in DevTools → Application → Local Storage;
• ho verificato che il formato dei dati sia un array JSON valido;
• ho verificato che i dati persistano dopo il ricaricamento della pagina;
• ho testato il comportamento con un dato corrotto;
• caricaTutti ha un try/catch attorno al JSON.parse.

Risultato atteso

Ho aperto DevTools → Application → Local Storage e trovato le chiavi del Registro.
I dati di registro_strumenti hanno N record con struttura: id, name, category, status.
Ho verificato che dopo il ricaricamento i dati sono ancora presenti.
Ho testato il dato corrotto: il sistema ritorna array vuoto e logga un warning.