JavaScript Academy · Lektion

Lagra objekt med JSON

Serialisera objekt för att lagra och hämta dem.

Lektion 3 av 413 steg

Lagra objekt med JSON är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Lagring innehåller bara strängar

Web Storage lagrar strängar, så ett objekt kan inte sparas direkt. Om ett objekt sparas blir resultatet den oanvändbara texten "[object Object]". Lösningen är JSON.

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

Serialisera med JSON.stringify

Konvertera ett objekt till en JSON-sträng med JSON.stringify innan det lagras.

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

Deserialisera med JSON.parse

Vid läsning omvandlar du strängen tillbaka till ett objekt med JSON.parse.

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

Tur och retur

Hela mönstret är att serialisera på vägen in och parsa på vägen ut. Det fungerar lika bra för objekt och arrayer.

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

Hantera null-fallet

JSON.parse(null) returnerar null (det kastar inget fel), men läsning av data som saknas kan ändå ge överraskningar. Ange ett reservvärde.

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

Skydda mot korruption

Om lagrad JSON har felaktigt format kastar JSON.parse ett SyntaxError. Omslut det med try/catch så att en felaktig post inte kraschar appen.

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

En återanvändbar hjälpfunktion för att spara

Omslut serialiseringssteget i en hjälpfunktion, så att det aldrig glöms bort.

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

Vad JSON inte kan spara

JSON kan inte representera funktioner, undefined, Date-objekt (de blir strängar), Map eller Set. Planera utifrån detta; lagra datum som ISO-strängar och återskapa dem vid läsning.

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

Återskapa datum

Eftersom datum serialiseras till strängar omvandlar du dem tillbaka efter parsning om du behöver Date-metoder.

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

Uppdatera kapslade data

Om en del av ett lagrat objekt ska ändras läser du det, ändrar kopian och skriver tillbaka den. Lagringen har inget API för partiella uppdateringar.

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

Versionshantera lagrade datastrukturer

Appens datastrukturer förändras över tid. Genom att lagra ett fält med version kan gammal data migreras eller tas bort när formatet utvecklas.

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

Snabbkontroll

Lagra objekt i Web Storage.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Lagringen innehåller strängar, så använd JSON.stringify på objekt innan de sparas och JSON.parse vid läsning. Skydda parsningen med try/catch och ange reservvärden. Kom ihåg att JSON utelämnar funktioner och undefined samt omvandlar datum till strängar. Uppdatera kapslade data genom att läsa, ändra och skriva tillbaka, och överväg versionshantering av lagrade datastrukturer.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Lagra objekt med JSON” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Lagra objekt med JSON”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Lagra objekt med JSON”?

Serialisera objekt för att lagra och hämta dem. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Lagra objekt med JSON”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy