localStorage getItem logs[object Object]

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));

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