Lagring af objekter med JSON
Serialisér objekter, så de kan gemmes og hentes.
Lagring af objekter med JSON er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.
Lageret indeholder kun strenge
Web Storage gemmer strenge, så du kan ikke gemme et objekt direkte. Hvis du gemmer et, bliver resultatet den ubrugelige tekst "[object Object]". Løsningen er JSON.
localStorage.setItem("user", { name: "Ada" });
console.log(localStorage.getItem("user")); // "[object Object]"Serialisere med JSON.stringify
Konvertér et objekt til en JSON-streng med JSON.stringify, før du gemmer det.
const user = { name: "Ada", age: 36 };
localStorage.setItem("user", JSON.stringify(user));Deserialisere med JSON.parse
Når du læser data, skal du konvertere strengen tilbage til et objekt med JSON.parse.
const raw = localStorage.getItem("user");
const user = JSON.parse(raw);
console.log(user.name); // "Ada"Tur-retur
Det fulde mønster er: serialisér på vej ind, og parsér på vej ud. Det fungerer både for objekter og arrays.
localStorage.setItem("nums", JSON.stringify([1, 2, 3]));
const nums = JSON.parse(localStorage.getItem("nums"));
console.log(nums[0]); // 1Håndtere null-tilfældet
JSON.parse(null) returnerer null (den kaster ikke en fejl), men det kan stadig give overraskelser at parse manglende data. Angiv en standardværdi som reserve.
const raw = localStorage.getItem("settings");
const settings = raw ? JSON.parse(raw) : {};Beskytte mod beskadigede data
Hvis gemt JSON er ugyldig, kaster JSON.parse en SyntaxError. Indpak den i try/catch, så én dårlig post ikke får din app til at gå ned.
function readJSON(key, fallback) {
try { return JSON.parse(localStorage.getItem(key)) ?? fallback; }
catch { return fallback; }
}En genanvendelig hjælpefunktion til lagring
Indpak serialiseringstrinnet i en hjælpefunktion, så du aldrig glemmer det.
function saveJSON(key, value) {
localStorage.setItem(key, JSON.stringify(value));
}
saveJSON("cart", [{ id: 1, qty: 2 }]);Hvad JSON ikke gemmer
JSON kan ikke repræsentere funktioner, undefined, Date-objekter (de bliver til strenge), Map eller Set. Planlæg efter det: gem datoer som ISO-strenge, og opbyg dem igen, når du læser dem.
const obj = { fn: () => 1, when: new Date() };
console.log(JSON.stringify(obj)); // {"when":"2026-..."}Gendanne datoer
Da datoer serialiseres til strenge, skal du konvertere dem tilbage efter parsing, hvis du har brug for Date-metoder.
const data = JSON.parse(localStorage.getItem("event"));
data.when = new Date(data.when);Opdatere indlejrede data
Hvis du vil ændre en del af et gemt objekt, skal du læse det, ændre kopien og skrive den tilbage. Lageret har ingen API til delvise opdateringer.
const cart = JSON.parse(localStorage.getItem("cart")) || [];
cart.push({ id: 9, qty: 1 });
localStorage.setItem("cart", JSON.stringify(cart));Versionsstyre gemte datastrukturer
Appens datastrukturer ændrer sig med tiden. Hvis du gemmer et version-felt, kan du migrere eller kassere gamle data, når formatet ændrer sig.
saveJSON("prefs", { version: 2, theme: "dark" });Hurtigt tjek
Gemme objekter i Web Storage.
Opsummering
Lageret indeholder strenge, så brug JSON.stringify på objekter, før du gemmer dem, og JSON.parse, når du læser dem. Beskyt parsing med try/catch, og angiv standardværdier. Husk, at JSON ikke gemmer funktioner eller undefined og konverterer datoer til strenge. Opdatér indlejrede data ved at læse, ændre og skrive dem, og overvej at versionsstyre dine gemte datastrukturer.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 59
- Lektioner
- 200
Ofte stillede spørgsmål
Er lektionen “Lagring af objekter med JSON” gratis?
Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Lagring af objekter med JSON”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Lagring af objekter med JSON”?
Serialisér objekter, så de kan gemmes og hentes. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på JavaScript Academy?
Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Lagring af objekter med JSON”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?
Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Lagring og læsning af data
- localStorage sammenlignet med sessionStorage
- Lagring af objekter med JSON
- Storage-hændelser og begrænsninger