How do I store objects in localStorage?

Question

I am trying to set and get items from local storage but when i log the data i get [object Object]

i am trying to get the view of that object something like this {a : v, b : v }...

here is the code :

var widgets = localStorage.getItem('widgets');
 if (widgets == null) {
 widgets = {
 widget_lot : '',
 widget_td : '',
 widget_cwo : '',
 widget_vehicles : '',
 widget_take : ''
 }; 
 widgets.widget_lot = 0;
 widgets.widget_td = 0;
 widgets.widget_cwo = 1;
 widgets.widget_vehicles = 0;
 widgets.widget_take = 0;
 localStorage.setItem('widgets', widgets);
 }
 console.log(widgets); //Logs "[object Object]"

Answer 1

Local storage only supports string datatype. So you have to

1. Convert it to String before saving to LocalStorage

   localStorage.setItem('key', JSON.stringify(data));
   

2. Convert back to JS object, reading from LocalStorage

   data = JSON.parse(localStorage.getItem('key')); //forgot to close
   

In case of your code, it should be -

var widgets = JSON.parse(localStorage.getItem('widgets'));

and

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

• zinho: thanks mate, works like a charm.. i was trying to fiddle with JSON but was getting unexpected error on token o... deleted the localstorage and saved the data gain, so it works now.. Thanks againa
• brainless coder: You are welcome. Make sure you mark the answer as accepted. Will help someone else if he/she needs same help ... :)

Answer 2

You need to stringify the object before storing it to the storage like

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

localStorage stores the value as string, so when you try to save an object to toString() method of the value to be stored is called, since you have a object it will return [object Object]

In the same way, getItem() returns a string, to convert it to a object use JSON.parse()

so

var widgets = localStorage.getItem('widgets');
console.log('stored', widgets)
if (widgets == null) {
 widgets = {
 widget_lot: '',
 widget_td: '',
 widget_cwo: '',
 widget_vehicles: '',
 widget_take: ''
 };
 widgets.widget_lot = 0;
 widgets.widget_td = 0;
 widgets.widget_cwo = 1;
 widgets.widget_vehicles = 0;
 widgets.widget_take = 0;
 localStorage.setItem('widgets', JSON.stringify(widgets));
} else {
 widgets = JSON.parse(widgets)
}
console.log(widgets); //Logs "[object Object]"

Demo: Fiddle