JavaScript Storage & BOM
JSON.stringifyandJSON.parselet you save objects and arrays in storage.
Storage only holds strings, but most real data is an object.
JSON is the bridge between the two.
Example
javascript
const user = { name: "Ada", age: 36 };
localStorage.setItem("user", JSON.stringify(user));
const saved = JSON.parse(localStorage.getItem("user"));
console.log(saved.name);The output is Ada.
JSON.stringify turns an object into a string before saving.
JSON.parse turns it back after reading.
Arrays work exactly the same way.
Syntax
javascript
localStorage.setItem(key, JSON.stringify(value));
JSON.parse(localStorage.getItem(key));Never save an object directly without stringifying it.
Without stringifying, an object becomes the useless text [object Object].
This is a very common mistake.
Example
javascript
localStorage.setItem("bad", { name: "Ada" });
console.log(localStorage.getItem("bad"));All the actual data was lost.
The round trip works identically for arrays.
Example
javascript
const tags = ["js", "css", "html"];
localStorage.setItem("tags", JSON.stringify(tags));
const saved = JSON.parse(localStorage.getItem("tags"));
console.log(saved.length);
console.log(saved.join(","));It comes back as a real array, not a string of text.
JSON.parse(null) throws, so check first.
This happens the first time a page runs, before anything was saved.
Example
javascript
localStorage.removeItem("settings");
const raw = localStorage.getItem("settings");
const settings = raw ? JSON.parse(raw) : {};
console.log(settings);A default value stands in when nothing was saved yet.
Load, change, then save the whole thing again.
Example
javascript
localStorage.setItem("user", JSON.stringify({ name: "Ada", visits: 1 }));
const user = JSON.parse(localStorage.getItem("user"));
user.visits += 1;
localStorage.setItem("user", JSON.stringify(user));
console.log(JSON.parse(localStorage.getItem("user")).visits);Storage has no way to change one property directly.
If the stored text is somehow broken, parsing throws.
Example
javascript
localStorage.setItem("broken", "not valid json");
let settings;
try {
settings = JSON.parse(localStorage.getItem("broken"));
} catch (error) {
settings = {};
}
console.log(settings);Falling back to a default keeps the page working.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Storing Objects</title>
</head>
<body>
<h1>Storing Objects</h1>
<p id="out"></p>
<script>
const raw = localStorage.getItem("preferences");
const preferences = raw ? JSON.parse(raw) : { theme: "light", visits: 0 };
preferences.visits += 1;
localStorage.setItem("preferences", JSON.stringify(preferences));
document.getElementById("out").textContent =
"Theme: " + preferences.theme + ", visits: " + preferences.visits;
</script>
</body>
</html>Run the above example in the Try It Editor.
Try reloading:
Reload a few times and watch the visit count climb.
JSON.stringify before saving, JSON.parse after reading.try catch in case the data is corrupted.JSON is what makes storage useful for real application data.
The two-step round trip becomes automatic very quickly.
Always guard against the value not existing yet.