JavaScript Academy · leksjon

Lagre objekter med JSON

Serialiser objekter for å lagre og hente dem.

Leksjon 3 av 413 trinn

Lagre objekter med JSON er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Lagring inneholder bare strenger

Web Storage lagrer strenger, så du kan ikke lagre et objekt direkte. Hvis du lagrer et objekt, får du den ubrukelige teksten "[object Object]". Løsningen er JSON.

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

Serialisere med JSON.stringify

Konverter et objekt til en JSON-streng med JSON.stringify før du lagrer det.

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

Deserialisere med JSON.parse

Når du leser, gjør du strengen om til et objekt igjen med JSON.parse.

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

Tur-retur

Hele mønsteret er å bruke stringify på vei inn og parse på vei ut. Dette fungerer både for objekter og tabeller.

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

Håndtere null-tilfellet

JSON.parse(null) returnerer null (det kaster ikke feil), men det kan likevel være overraskende å tolke manglende data. Angi en standardverdi som reserve.

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

Beskytte mot korrupsjon

Hvis lagret JSON har ugyldig format, kaster JSON.parse en SyntaxError. Pakk det inn i try/catch, slik at én ødelagt oppføring ikke får appen til å krasje.

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

En gjenbrukbar hjelpefunksjon for lagring

Legg stringify-steget i en hjelpefunksjon, slik at du aldri glemmer det.

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

Hva JSON utelater

JSON kan ikke representere funksjoner, undefined, Date-objekter (de blir strenger), Map eller Set. Ta hensyn til dette; lagre datoer som ISO-strenger og bygg dem opp igjen ved lesing.

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

Gjenopprette datoer

Siden datoer serialiseres som strenger, må du konvertere dem tilbake etter parsing hvis du trenger Date-metoder.

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

Oppdatere nøstede data

Hvis du vil endre en del av et lagret objekt, leser du det, endrer kopien og skriver den tilbake. Lagringen har ingen API for delvise oppdateringer.

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

Versjonere lagrede strukturer

Datastrukturer i apper endrer seg over tid. Hvis du lagrer et version-felt, kan du migrere eller forkaste gamle data når formatet utvikler seg.

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

Hurtigsjekk

Lagre objekter i Web Storage.

Besvar den i den interaktive leksjonen

Oppsummering

Lagringen inneholder strenger, så bruk JSON.stringify på objekter før du lagrer dem, og JSON.parse når du leser. Beskytt parsing med try/catch og angi standardverdier. Husk at JSON utelater funksjoner og undefined, og gjør datoer om til strenger. Oppdater nøstede data ved å lese, endre og skrive tilbake, og vurder å versjonere de lagrede strukturene.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 59
Leksjoner: 200

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Lagre objekter med JSON» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Lagre objekter med JSON», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Lagre objekter med JSON»?

Serialiser objekter for å lagre og hente dem. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Lagre objekter med JSON»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til JavaScript Academy