{"id":"l-js-4-4","courseId":"javascript-fundamentals","lang":"en","kind":"lesson","summary":"Turn data into JSON text and back with JSON.stringify and JSON.parse, know what JSON cannot hold, and save and load Pocket’s expenses with localStorage safely.","html":"

Add three expenses to Pocket, reload the page, and they are gone. Everything you built lives in JavaScript variables, and variables only last as long as the page. To remember data between visits you need to store it somewhere, and the simplest place a web page can store data is in the user’s own browser. First, though, the data has to become text.

\n

JSON: data as text

\n

JSON (JavaScript Object Notation) is a text format for data. It looks almost exactly like JavaScript object and array literals, which is no coincidence, and today it is the most common format for sending data between programs on the web.

\n
JavaScript
const expenses = [\n  { id: \"exp-1\", label: \"Coffee\", amount: 450, tags: [\"work\"] },\n  { id: \"exp-2\", label: \"Train\", amount: 1220, tags: [] },\n];\n\nconst text = JSON.stringify(expenses);\nconsole.log(typeof text);\nconsole.log(text);\n\nconst back = JSON.parse(text);\nconsole.log(back[1].label, back === expenses);
\n

JSON.stringify turns a value into a JSON string. JSON.parse reads a JSON string and builds new values from it. The result is a fresh copy with the same contents, which is why back === expenses is false.

\n

JSON’s rules are stricter than JavaScript’s: property names must be in double quotes, strings use double quotes only, and trailing commas are not allowed. You rarely write JSON by hand, but when you do, those three rules cause most parse errors. For a readable version, JSON.stringify(value, null, 2) indents the output by two spaces.

\n

What JSON cannot hold

\n

JSON knows strings, numbers, booleans, null, arrays and plain objects. Anything else is changed or lost on the way through:

\n
JavaScript
const tricky = {\n  when: new Date(\"2026-10-05T09:30:00Z\"),\n  note: undefined,\n  format() { return \"hi\"; },\n  tags: new Set([\"work\"]),\n  ratio: NaN,\n};\nconsole.log(JSON.stringify(tricky));
\n

Dates become ISO strings and do not come back as dates, undefined properties and functions are dropped, Sets and Maps become empty objects, and NaN becomes null. Pocket avoids all of this by design: amounts are whole numbers, dates are stored as "2026-10-05" strings, and categories are plain strings. Choosing JSON-friendly data from the start saves a lot of conversion code later.

\n\n

localStorage: a small store in the browser

\n

Every website gets a small key-value store in each user’s browser, called localStorage. It survives reloads and browser restarts, and it holds strings only:

\n
storage.js
localStorage.setItem(\"pocket.theme\", \"dark\");\nconsole.log(localStorage.getItem(\"pocket.theme\")); // \"dark\"\nconsole.log(localStorage.getItem(\"nothing-here\")); // null\nlocalStorage.removeItem(\"pocket.theme\");
\n

To store an array of expenses, turn it into JSON on the way in and parse it on the way out:

\n
\n Saving: the expenses array is turned into a JSON string with JSON.stringify and stored with setItem. Loading: getItem returns the string, and JSON.parse turns it back into a new array.\n \n expenses\n array of objects\n \n JSON string\n '[{\"id\":…}]'\n \n localStorage\n \n \n \n \n stringify\n setItem\n getItem\n parse\n
Saving and loading goes through JSON text
\n
storage.js
const STORAGE_KEY = \"pocket.expenses.v1\";\n\nfunction saveExpenses(expenses) {\n  localStorage.setItem(STORAGE_KEY, JSON.stringify(expenses));\n}\n\nfunction loadExpenses() {\n  try {\n    const text = localStorage.getItem(STORAGE_KEY);\n    const data = text === null ? [] : JSON.parse(text);\n    return Array.isArray(data) ? data : [];\n  } catch {\n    return [];\n  }\n}
\n

loadExpenses is defensive on purpose, because it runs on every page load and must never crash the app. A first-time visitor has nothing saved, so getItem returns null and we start with an empty list. Corrupted text makes JSON.parse throw, and the catch falls back to an empty list. Some browsers’ privacy modes block storage entirely, and that throws too, into the same catch. Finally, Array.isArray guards against valid JSON of the wrong shape. The .v1 in the key lets a future version of Pocket change the data format and migrate old data instead of misreading it.

\n

Then wire it up: load once at start-up, and save every time the data changes, right where you already call renderExpenses:

\n
app.js
let expenses = loadExpenses();\nrenderExpenses();\n\nfunction setExpenses(next) {\n  expenses = next;\n  saveExpenses(expenses);\n  renderExpenses();\n}
\n

Routing every change through one setExpenses function means you cannot forget to save in one handler and remember in another.

\n

To see what is stored, open DevTools, go to the Application panel in Chrome or Edge (Storage in Firefox), and expand Local Storage. You can read, edit and delete entries there, which is the quickest way to test what your app does with missing or broken data. There is also sessionStorage, with the same methods, which is cleared when the tab is closed.

\n\n

You can now keep data across visits. The other big source of data is a server on the internet, and talking to one means waiting for an answer. Waiting is the subject of the next lesson.

\n","toc":[{"id":"sec-1","text":"JSON: data as text","level":2},{"id":"sec-2","text":"What JSON cannot hold","level":3},{"id":"sec-3","text":"localStorage: a small store in the browser","level":2}],"takeaways":["JSON is a text format for data; JSON.stringify turns values into JSON text and JSON.parse turns JSON text back into values.","JSON holds strings, numbers, booleans, null, arrays and plain objects; functions and undefined are dropped, and dates become strings.","localStorage stores strings only, per website, in the user’s browser; save with setItem(key, JSON.stringify(data)).","Loading must survive a missing key (getItem returns null) and corrupted text (JSON.parse throws), so wrap it in try/catch with a fallback."],"further":[{"title":"Working with JSON (MDN)","url":"https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/JSON"},{"title":"JSON.stringify() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify"},{"title":"Window.localStorage (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage"}],"quiz":[{"q":"

localStorage.setItem("expenses", expenses) is called with an array of objects. What is stored?

","options":[{"text":"The text "[object Object],[object Object]".","why":"Correct. Each object converts to “[object Object]” and the data is lost. Store JSON.stringify(expenses) instead."},{"text":"The array, ready to use when you read it back.","why":"localStorage only stores strings. Anything else is converted with String() first."},{"text":"Nothing; setItem throws for non-string values.","why":"It does not throw. It silently converts the value to a string, which is why the bug is easy to miss."}],"answer":0},{"q":"

What does JSON.stringify({ label: "Tea", note: undefined, amount: 300 }) produce?

","options":[{"text":"{"label":"Tea","amount":300}","why":"Correct. Properties whose value is undefined (and functions) are left out, because JSON has no way to write them."},{"text":"{"label":"Tea","note":undefined,"amount":300}","why":"undefined is not valid JSON, so stringify never writes it inside an object."},{"text":"{"label":"Tea","note":null,"amount":300}","why":"stringify drops undefined properties rather than converting them to null. Only null itself is written as null."}],"answer":0},{"q":"

Pocket loads with JSON.parse(localStorage.getItem("pocket.expenses")) on a first visit, when nothing was saved yet. What happens?

","options":[{"text":"It throws, because getItem throws for unknown keys.","why":"getItem returns null for a missing key; it does not throw."},{"text":"It returns null, because JSON.parse(null) treats null as the JSON text “null”.","why":"Correct. The code then crashes later when it calls .map on null. Fall back with ?? [] or an explicit check."},{"text":"It returns an empty array.","why":"Nothing creates an array here. You need to supply the empty-array fallback yourself."}],"answer":1}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// Pocket's storage helpers. In this playground, localStorage works but starts\n// empty on every run; on a real page it keeps its data between visits.\nconst STORAGE_KEY = \"pocket.expenses.v1\";\n\nfunction saveExpenses(expenses) {\n localStorage.setItem(STORAGE_KEY, expenses);\n}\n\nfunction loadExpenses() {\n return JSON.parse(localStorage.getItem(STORAGE_KEY));\n}\n\nsaveExpenses([{ id: \"exp-1\", label: \"Coffee\", amount: 450 }]);\nconsole.log(localStorage.getItem(STORAGE_KEY));\n"},"solution":{"js":"// Pocket's storage helpers. In this playground, localStorage works but starts\n// empty on every run; on a real page it keeps its data between visits.\nconst STORAGE_KEY = \"pocket.expenses.v1\";\n\nfunction saveExpenses(expenses) {\n localStorage.setItem(STORAGE_KEY, JSON.stringify(expenses));\n}\n\nfunction loadExpenses() {\n try {\n const text = localStorage.getItem(STORAGE_KEY);\n const data = text === null ? [] : JSON.parse(text);\n return Array.isArray(data) ? data : [];\n } catch {\n return [];\n }\n}\n\nsaveExpenses([{ id: \"exp-1\", label: \"Coffee\", amount: 450 }]);\nconsole.log(localStorage.getItem(STORAGE_KEY));\n"},"checks":[{"id":"saves-json","test":"localStorage.clear();\nsaveExpenses([{ id: 'a', label: 'Tea', amount: 300 }]);\nconst raw = localStorage.getItem('pocket.expenses.v1');\ntry { const back = JSON.parse(raw); return Array.isArray(back) && back[0].label === 'Tea' && back[0].amount === 300; } catch { return false; }\n"},{"id":"round-trip","test":"localStorage.clear();\nconst data = [{ id: 'a', label: 'Tea', amount: 300 }, { id: 'b', label: 'Bus', amount: 270 }];\nsaveExpenses(data);\nconst back = loadExpenses();\nreturn Array.isArray(back) && back.length === 2 && back[1].label === 'Bus' && back[1].amount === 270 && back !== data;\n"},{"id":"missing","test":"localStorage.clear();\nconst out = loadExpenses();\nreturn Array.isArray(out) && out.length === 0;\n"},{"id":"corrupt","test":"localStorage.clear();\nlocalStorage.setItem('pocket.expenses.v1', '[{\"id\": \"a\", oops');\ntry { const out = loadExpenses(); return Array.isArray(out) && out.length === 0; } catch { return false; }\n"},{"id":"wrong-shape","test":"localStorage.clear();\nlocalStorage.setItem('pocket.expenses.v1', '{\"label\":\"not a list\"}');\ntry { const out = loadExpenses(); return Array.isArray(out) && out.length === 0; } catch { return false; }\n"}],"title":"Save and load Pocket safely","prompt":"

Pocket’s storage helpers lose data. Fix them, using the real localStorage (in this playground it works but starts empty on every run):

\n\n","hints":["Log what the starter stores: [object Object]. Wrap the data in JSON.stringify(...) before setItem.","getItem returns null when nothing was saved. Check for that before parsing.","Put the parse inside try { … } catch { return []; }, and finish with return Array.isArray(data) ? data : [];."],"explanation":"

localStorage only keeps strings, so the array has to be serialised with JSON.stringify on the way in; otherwise it is converted with String() and becomes [object Object]. Loading guards against three different failures: a missing key (getItem returns null), text that is not JSON (JSON.parse throws, which the catch turns into an empty list), and JSON of the wrong shape (Array.isArray rejects it). The same try also catches browsers that block storage entirely, so a page load can never crash here.

\n","checkLabels":{"saves-json":"saveExpenses stores the expenses as JSON text","round-trip":"Saved expenses load back unchanged","missing":"Loading with nothing saved returns []","corrupt":"Loading invalid JSON returns [] instead of throwing","wrong-shape":"Loading JSON that is not an array returns []"}},"words":715,"readMinutes":3}