JavaScript Academy · Lezione

Salvare oggetti con JSON

Serializzi gli oggetti per salvarli e recuperarli.

Salvare oggetti con JSON è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Lo storage contiene solo stringhe

Web Storage memorizza stringhe, quindi non può salvare direttamente un oggetto. Memorizzarlo produce il testo inutile "[object Object]". La soluzione è utilizzare JSON.

localStorage.setItem("user", { name: "Ada" });
console.log(localStorage.getItem("user")); // "[object Object]"

Serializzazione con JSON.stringify

Converta un oggetto in una stringa JSON con JSON.stringify prima di memorizzarlo.

const user = { name: "Ada", age: 36 };
localStorage.setItem("user", JSON.stringify(user));

Deserializzazione con JSON.parse

Durante la lettura, trasformi nuovamente la stringa in un oggetto con JSON.parse.

const raw = localStorage.getItem("user");
const user = JSON.parse(raw);
console.log(user.name); // "Ada"

Andata e ritorno

Lo schema completo è: eseguire stringify prima di salvare e parse dopo aver letto. Funziona sia per gli oggetti sia per gli array.

localStorage.setItem("nums", JSON.stringify([1, 2, 3]));
const nums = JSON.parse(localStorage.getItem("nums"));
console.log(nums[0]); // 1

Gestione del caso null

JSON.parse(null) restituisce null (non genera un errore), ma l'analisi di dati mancanti può comunque produrre risultati inattesi. Fornisca un valore predefinito alternativo.

const raw = localStorage.getItem("settings");
const settings = raw ? JSON.parse(raw) : {};

Protezione dalla corruzione dei dati

Se il JSON memorizzato non è valido, JSON.parse genera un SyntaxError. Lo racchiuda in try/catch, così una singola voce danneggiata non farà arrestare l'applicazione.

function readJSON(key, fallback) {
  try { return JSON.parse(localStorage.getItem(key)) ?? fallback; }
  catch { return fallback; }
}

Un helper riutilizzabile per il salvataggio

Racchiuda il passaggio di stringify in un helper, così non rischierà mai di dimenticarlo.

function saveJSON(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}
saveJSON("cart", [{ id: 1, qty: 2 }]);

Cosa viene escluso da JSON

JSON non può rappresentare funzioni, undefined, oggetti Date (che diventano stringhe), Map o Set. Si organizzi di conseguenza: memorizzi le date come stringhe ISO e le ricostruisca durante la lettura.

const obj = { fn: () => 1, when: new Date() };
console.log(JSON.stringify(obj)); // {"when":"2026-..."}

Ripristino delle date

Poiché le date vengono serializzate come stringhe, le trasformi nuovamente dopo il parsing se deve utilizzare i metodi di Date.

const data = JSON.parse(localStorage.getItem("event"));
data.when = new Date(data.when);

Aggiornamento dei dati annidati

Per modificare una parte di un oggetto memorizzato, lo legga, modifichi la copia e la salvi nuovamente. Lo storage non dispone di un'API per aggiornamenti parziali.

const cart = JSON.parse(localStorage.getItem("cart")) || [];
cart.push({ id: 9, qty: 1 });
localStorage.setItem("cart", JSON.stringify(cart));

Versionamento delle strutture memorizzate

La struttura dei dati dell'applicazione cambia nel tempo. Memorizzare un campo version consente di migrare o eliminare i dati precedenti quando il formato cambia.

saveJSON("prefs", { version: 2, theme: "dark" });

Verifica rapida

Memorizzazione di oggetti in Web Storage.

Riepilogo

Lo storage contiene stringhe, quindi utilizzi JSON.stringify sugli oggetti prima di salvarli e JSON.parse durante la lettura. Protegga il parsing con try/catch e fornisca valori predefiniti. Ricordi che JSON esclude le funzioni e undefined, mentre trasforma le date in stringhe. Aggiorni i dati annidati con il ciclo lettura-modifica-scrittura e valuti il versionamento delle strutture memorizzate.

Domande Frequenti

La lezione «Salvare oggetti con JSON» è gratuita?

Sì — il testo completo di «Salvare oggetti con JSON» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Salvare oggetti con JSON»?

Serializzi gli oggetti per salvarli e recuperarli. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Salvare oggetti con JSON»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy