JavaScript Storage & BOM

JavaScript Storing Objects

Written by Swapnil RajaPublished 24 Aug 2026

JSON.stringify and JSON.parse let 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.

Saving and Loading Objects

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.

Saving Directly Fails

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.

Storing an Array

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.

Handling a Missing Value

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.

Updating a Stored Object

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.

Corrupted Data

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>

Try It Yourself

Run the above example in the Try It Editor.

Try reloading:

Reload a few times and watch the visit count climb.

Important Points

Storage only holds strings.
JSON.stringify before saving, JSON.parse after reading.
Saving an object directly gives [object Object].
Check for a missing value before parsing.
Wrap parsing in try catch in case the data is corrupted.

Conclusion

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.

PreviousJavaScript sessionStorage NextJavaScript Storage Events