How to Store JavaScript Objects in localStorage and sessionStorage

By the end of this page, you will understand why localStorage and sessionStorage store values as strings, how to save JavaScript objects using JSON.stringify(), and how to restore them with JSON.parse(). You will also learn common pitfalls, practical usage patterns, and how this is handled in real applications.

localStorage and sessionStorage are part of the Web Storage API. They are simple key-value stores in the browser, and both store values as strings.

That means when you do this:

localStorage.setItem('testObject', testObject);

JavaScript tries to convert testObject into a string. A plain object becomes:

"[object Object]"

So the problem is not that the object is partially stored. It is that the object is being converted to its default string representation before storage.

To store objects correctly, you must:

1. Convert the object into a JSON string with JSON.stringify()
2. Save that string to storage
3. Convert it back into an object with JSON.parse() when reading it

Example:

var testObject = { one: 1, two: 2, three: 3 };
localStorage.setItem(, .(testObject));

 retrievedObject = .(.());
.(retrievedObject.); 

Think of localStorage like a notebook where every note must be written as text.

• Numbers can be written as text
• Booleans can be written as text
• Arrays can be written as text
• Objects must also be written as text

But if you hand the notebook a raw JavaScript object, it does not know how to preserve the full structure. It just writes the object's default label:

[object Object]

JSON.stringify() is like translating your object into a text format the notebook can store accurately.

JSON.parse() is like reading that text and rebuilding the original object.

So the workflow is:

• before saving → translate object to JSON text
• after loading → rebuild object from JSON text

The standard pattern is:

localStorage.setItem('key', JSON.stringify(value));
var value = JSON.parse(localStorage.getItem('key'));

Storing a plain object

var user = {
  name: 'Ava',
  age: 29,
  isAdmin: false
};

localStorage.setItem('user', JSON.stringify(user));

Retrieving the object

var storedUser = localStorage.getItem('user');
var userObject = JSON.parse(storedUser);

console.log(userObject.name); // Ava
.(userObject.);  

Consider this example:

var testObject = { one: 1, two: 2 };
localStorage.setItem('testObject', JSON.stringify(testObject));
var rawValue = localStorage.getItem('testObject');
var retrievedObject = JSON.parse(rawValue);

console.log(rawValue);
console.log(retrievedObject);
console.log(retrievedObject.two);

Step-by-step

1. testObject is created as a JavaScript object.

   { one: 1, two: 2 }
   

2. JSON.stringify(testObject) converts it into a JSON string.

Web Storage is commonly used for small amounts of browser-side data.

Common examples

• User preferences

  • theme (dark or light)
  • language choice
  • layout settings

• Shopping cart state

  • product IDs
  • quantities
  • selected options

• Draft form data

  • unsaved text input
  • multi-step form progress

• Cached API data

  • recently fetched responses
  • profile information
  • dashboard filters

• Session-only UI state

  • active tab
  • modal dismissal state
  • temporary navigation context

Example: saving a shopping cart

var cart = [
  { id: 101, name: 'Book', quantity: 2 },
  { id: 305, name: 'Pen', quantity:  }
];

.(, .(cart));

 savedCart = .(.()) || [];
.(savedCart.); 

In real projects, developers usually wrap Web Storage access in helper functions instead of calling JSON.stringify() and JSON.parse() everywhere.

Common helper pattern

function saveToStorage(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}

function loadFromStorage(key) {
  var raw = localStorage.getItem(key);
  return raw ? JSON.parse(raw) : null;
}

Why helpers are useful

• reduce repeated code
• keep serialization logic in one place
• make error handling easier
• allow fallback values
• simplify testing

Guard clause pattern

function loadSettings() {
  var raw = localStorage.getItem('settings');
  if (!raw)  { :  };

   .(raw);
}

1. Saving objects without JSON.stringify()

Broken code:

var user = { name: 'Sam' };
localStorage.setItem('user', user);

Result:

"[object Object]"

Fix:

localStorage.setItem('user', JSON.stringify(user));

2. Forgetting to parse after reading

Broken code:

localStorage.setItem('user', JSON.stringify({ name: 'Sam' }));
var user = localStorage.getItem('user');
console.log(user.name); 

localStorage vs sessionStorage

.(, );
.(, );

// Save object
localStorage.setItem('key', JSON.stringify(obj));

// Load object
var obj = JSON.parse(localStorage.getItem('key'));

// Safe load with fallback
var raw = localStorage.getItem('key');
var obj = raw ? JSON.parse(raw) : null;

Rules

• localStorage stores strings only
• sessionStorage also stores strings only
• Use JSON.stringify() before saving objects or arrays
• Use JSON.parse() after reading JSON text
• getItem() returns null if the key does not exist
• JSON.parse() can throw on invalid JSON

Good patterns

Why does localStorage turn my object into [object Object]?

Because Web Storage stores strings. When you pass a plain object directly, JavaScript converts it to its default string form.

Can localStorage store JavaScript objects directly?

Not directly as true objects. You should serialize them with JSON.stringify() and restore them with JSON.parse().

Does sessionStorage behave the same way as localStorage?

Yes. Both store key-value pairs as strings.

Can I store arrays in localStorage?

Yes, but you should still use JSON:

localStorage.setItem('items', JSON.stringify([1, 2, 3]));

What happens if the key does not exist?

getItem() returns null.

Can store functions or methods?

• JSON.stringify() — converts JavaScript data into a JSON string for storage or transmission.
• JSON.parse() — converts a JSON string back into a JavaScript value.
• Web Storage API — the browser API that includes localStorage and sessionStorage.
• Cookies — another browser storage mechanism, often compared with Web Storage.
• JavaScript objects — understanding object structure helps explain why direct storage does not work.
• Arrays in JavaScript — arrays are also commonly stored using JSON serialization.
• Type conversion in JavaScript — helps explain why objects become strings like [object Object].
• Error handling with try...catch — useful when parsing possibly invalid JSON.