JavaScript Academy · Les

Objecten opslaan met JSON

Serialiseer objecten om ze op te slaan en terug te halen.

Les 3 van 413 stappen

Objecten opslaan met JSON is een gratis JavaScript Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.

Opslag bevat alleen tekenreeksen

Web Storage slaat tekenreeksen op, dus je kunt een object niet rechtstreeks bewaren. Als je dat toch doet, ontstaat de nutteloze tekst "[object Object]". De oplossing is JSON.

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

Serialiseren met JSON.stringify

Zet een object met JSON.stringify om naar een JSON-tekenreeks voordat je het opslaat.

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

Deserialiseren met JSON.parse

Zet bij het lezen de tekenreeks met JSON.parse terug naar een object.

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

Heen-en-terugronde

Het volledige patroon: stringify bij het opslaan en parse bij het uitlezen. Dit werkt zowel voor objecten als voor arrays.

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

Omgaan met het geval null

JSON.parse(null) geeft null terug (er wordt geen fout gegenereerd), maar het parsen van ontbrekende gegevens kan je nog steeds verrassen. Geef een standaardwaarde als terugvaloptie.

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

Beschermen tegen beschadigde gegevens

Als opgeslagen JSON ongeldig is, genereert JSON.parse een SyntaxError. Pak dit in met try/catch, zodat één ongeldige invoer je app niet laat crashen.

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

Een herbruikbare helper voor opslaan

Pak de stap voor het omzetten naar een tekenreeks in een helper, zodat je die nooit vergeet.

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

Wat JSON weglaat

JSON kan functies, undefined, Date-objecten (ze worden tekenreeksen), Map of Set niet weergeven. Houd hier rekening mee: sla datums op als ISO-tekenreeksen en maak er bij het lezen weer datums van.

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

Datums herstellen

Omdat datums naar tekenreeksen worden geserialiseerd, moet je ze na het parsen weer omzetten als je Date-methoden nodig hebt.

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

Geneste gegevens bijwerken

Om een deel van een opgeslagen object te wijzigen, lees je het uit, pas je de kopie aan en schrijf je die terug. Opslag heeft geen API voor gedeeltelijke updates.

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

Opgeslagen structuren versies geven

De structuur van appgegevens verandert in de loop van de tijd. Met een veld version kun je oude gegevens migreren of verwijderen wanneer de indeling verandert.

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

Korte controle

Objecten opslaan in Web Storage.

Beantwoord dit in de interactieve les

Samenvatting

Opslag bevat tekenreeksen. Gebruik daarom JSON.stringify voor objecten voordat je ze opslaat en JSON.parse bij het lezen. Bescherm het parsen met try/catch en geef standaardwaarden op. Onthoud dat JSON functies en undefined weglaat en datums omzet naar tekenreeksen. Werk geneste gegevens bij door ze te lezen, aan te passen en terug te schrijven, en overweeg versies aan opgeslagen structuren toe te voegen.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 59
Lessen: 200

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Objecten opslaan met JSON” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Objecten opslaan met JSON”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Objecten opslaan met JSON”?

Serialiseer objecten om ze op te slaan en terug te halen. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met JavaScript Academy te beginnen?

Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Objecten opslaan met JSON”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?

Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar JavaScript Academy