EN
RU
ES
ZH
FR
DE
PT
AR
HI
Why localStorage Doesn't Work with Objects (and How to Fix It)
Have you ever tried to save an object in localStorage and got the string "[object Object]" instead? If so — you are not alone. This question on Stack Overflow has thousands of views, and today we will finally figure out how to properly store objects in HTML5 web storage.
The thing is, localStorage and sessionStorage can only work with strings. When you write:
localStorage.setItem('user', {name: 'Anna', age: 25});JavaScript automatically calls the .toString() method on the object, and the result is a useless string. But there is a proven way to bypass this limitation — serialization via JSON.
What is Serialization and Why Do You Need It
Serialization is the process of converting a complex data structure (object, array) into a string that can be saved or transmitted. The reverse process is called deserialization (converting the string back into an object).
In JavaScript, two methods handle this:
JSON.stringify()— converts an object into a JSON stringJSON.parse()— converts a JSON string back into an object
These methods are the key to solving the problem of storing objects in localStorage and sessionStorage.
Step-by-Step Tutorial: Saving an Object in localStorage
Step 1. Create an object
const user = { id: 101, name: 'Maria', email: 'maria@example.com', preferences: { theme: 'dark', notifications: true }, tags: ['javascript', 'react', 'python']};Step 2. Serialize to JSON
const userJSON = JSON.stringify(user);console.log(userJSON); // {"id":101,"name":"Maria","email":"maria@example.com","preferences":{"theme":"dark","notifications":true},"tags":["javascript","react","python"]}Step 3. Save to localStorage
localStorage.setItem('currentUser', userJSON);Step 4. Retrieve and deserialize
const savedUserJSON = localStorage.getItem('currentUser');const savedUser = JSON.parse(savedUserJSON);
console.log(savedUser.name); // Mariaconsole.log(savedUser.preferences.theme); // darkconsole.log(savedUser.tags[0]); // javascriptThat's it! Now you have a full-fledged object with all nested structures.
sessionStorage: Same Thing, But with a Catch
sessionStorage works exactly the same as localStorage, but with one important difference: the data lives only until the tab is closed. As soon as you close the browser tab — everything is deleted.
// SavesessionStorage.setItem('tempData', JSON.stringify({step: 3, progress: '75%'}));
// Retrieveconst temp = JSON.parse(sessionStorage.getItem('tempData'));console.log(temp.progress); // 75%Use sessionStorage for temporary data: form state, wizard steps, one-time tokens.
Common Mistakes and How to Avoid Them
Mistake 1: Forgetting to parse
const data = localStorage.getItem('myObject');console.log(data.name); // undefined — because data is a string!Solution: always use JSON.parse() after retrieving data.
Mistake 2: Saving undefined or functions
const obj = { name: 'Alex', greet: function() { return 'Hi!'; } };localStorage.setItem('test', JSON.stringify(obj)); // the function will be lostSolution: JSON.stringify does not save functions, undefined, Symbol
Blogs
Book Recommendations
Read also
