CODEWITHSUNDEEP
javascriptobjectlocal-storage
zinho
zinho

Reputation: 225

How do I store objects in localStorage?

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]"

Upvotes: 18

Views: 36716

Answers (2)

brainless coder
brainless coder

Reputation: 6430

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

Upvotes: 47

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 2

Related Questions