JavaScript Academy · Lesson

Storing Objects with JSON

Serialize objects to store and retrieve them.

Storing Objects with JSON is a free JavaScript Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Storage Holds Only Strings

Web Storage stores strings, so you cannot save an object directly. Storing one yields the useless text "[object Object]". The fix is JSON.

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

Serialize With JSON.stringify

Convert an object to a JSON string with JSON.stringify before storing it.

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

Deserialize With JSON.parse

When reading, turn the string back into an object with JSON.parse.

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

Round Trip

The full pattern: stringify on the way in, parse on the way out. This works for objects and arrays alike.

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

Handle the null Case

JSON.parse(null) returns null (it does not throw), but parsing missing data can still surprise you. Provide a fallback default.

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

Guard Against Corruption

If stored JSON is malformed, JSON.parse throws a SyntaxError. Wrap it in try/catch so one bad entry does not crash your app.

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

A Reusable Save Helper

Wrap the stringify step in a helper so you never forget it.

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

What JSON Drops

JSON cannot represent functions, undefined, Date objects (they become strings), Map, or Set. Plan around this; store dates as ISO strings and rebuild them on read.

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

Restoring Dates

Since dates serialize to strings, convert them back after parsing if you need Date methods.

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

Updating Nested Data

To change part of a stored object, read it, mutate the copy, and write it back. Storage has no partial-update API.

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

Versioning Stored Shapes

App data shapes change over time. Storing a version field lets you migrate or discard old data when the format evolves.

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

Quick Check

Storing objects in Web Storage.

Recap

Storage holds strings, so JSON.stringify objects before saving and JSON.parse when reading. Guard parsing with try/catch and provide defaults. Remember JSON drops functions, undefined, and turns dates into strings. Update nested data by read-mutate-write, and consider versioning your stored shapes.

Frequently asked questions

Is the “Storing Objects with JSON” lesson free?

Yes — the full text of “Storing Objects with JSON” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Storing Objects with JSON”?

Serialize objects to store and retrieve them. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Storing Objects with JSON” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to JavaScript Academy