Localstorage: Change value for a specific array using Stringify

Question

I don't know if the question is very accurate but I'm trying to change a value from a localstorage array.

This is what my localstorage looks like:

[{"id":"item-1","href":"google.com","icon":"google.com"},
{"id":"item-2","href":"youtube.com","icon":"youtube.com"},
{"id":"item-3","href":"google.com","icon":"google.com"},
{"id":"item-4","href":"google.com","icon":"google.com"},
{"id":"item-5","href":"youtube.com","icon":"youtube.com"},
{"id":"item-6","href":"asos.com","icon":"asos.com"},
{"id":"item-7","href":"google.com","icon":"google.com"},
{"id":"item-8","href":"mcdonalds.com","icon":"mcdonalds.com"}]

The key is 'result'.

How can I setItem for id:item-6, href:. So for example. The item-6, href is asos.com. How can I set change that to stackoverflow.com ?

I assume It will be something like this:

localStorage.setItem("result", JSON.stringify( ??? ));

EDIT:

I already achieved to retrieve the data from the localstorage: Here is the working fiddle: http://jsfiddle.net/kZN4y/. Using the same coding, I want to update the value mentioned in the update click. Is that possible?

Thanks

Answer 1

Personnally, I don't hesitate to create functions that handle the full object, in your case something like:

var blob = [{"id":"item-1","href":"google.com","icon":"google.com"},
{"id":"item-2","href":"youtube.com","icon":"youtube.com"},
{"id":"item-3","href":"google.com","icon":"google.com"},
{"id":"item-4","href":"google.com","icon":"google.com"},
{"id":"item-5","href":"youtube.com","icon":"youtube.com"},
{"id":"item-6","href":"asos.com","icon":"asos.com"},
{"id":"item-7","href":"google.com","icon":"google.com"},
{"id":"item-8","href":"mcdonalds.com","icon":"mcdonalds.com"}];

// define helper functions
Storage.prototype.setBlob = function (blob)
{
    for (i in blob) {
        // example of storageObjet: {'item-3': {'href': 'google.com', 'icon': 'google.png'}}
        var struct={};
        for (key in blob[i]) {
            if (key != 'id') {
                struct[key] = blob[i][key];
            }
        };
        this.setObject(blob[i].id, struct);
    }
}


Storage.prototype.setObject = function(key, obj) {
    this.setItem( key, JSON.stringify(obj) );    
};

Storage.prototype.getObject = function(key) {
    return JSON.parse(this.getItem(key));
};

// do stuff
sessionStorage.clear();
sessionStorage.setBlob(blob);

var key = 'item-6';
var item = sessionStorage.getObject(key);
item.href = 'stackoverflow.com';
sessionStorage.setObject(key, item);

for (key in sessionStorage) {
    if (typeof(sessionStorage[key]) == 'string') {
        var item2 = sessionStorage.getObject(key);
        $('#stuff').append( $('<div>').html(item2.href) );
    }
}

check this jsfiddle

NB: in this example I use sessionStorage instead of localStorage, but the interface is the same, both use Storage prototype.

As you see, I change the structure of each item to something like this: {'item-3': {'href': 'google.com', 'icon': 'google.png'}}. I do this because it reflects javascript, localStorage, and overall the concept of key/value way better, and eases the usage a lot.

in this example you there is:

var item = sessionStorage.getObject(key);
item.href = 'stackoverflow.com';
sessionStorage.setObject(key, item);

this looks a very practical way to handle localStorage to me.

Moreover, the "setBlob" function can handle a random and variable numbers of elements per item. This allows you to have one item having 5 attributes if you want, while all others have 2. It works with your "flat" structure as long as there is one element called with the key "id".

EDIT: debugged, and switched to a more classical setValue(key, item);

Answer 2

Your question isn't entirely clear, but hopefully this helps.

Since localStorage is a key/value store, each key has to be a unique value. If you want to store a json object for a particular key, it has to be stringified to store, and parsed to retrieve it.

Typically I will write a couple of utility functions to get/set values.

var get = function(key){
    return JSON.parse(localStorage.getItem(key));
}

var set = function(key, val){
    localStorage.setItem( JSON.stringify(val) );
}

Then in your code you would update the object returned from get() and then pass that object to set(), which puts it back into localStorage.

Updating the values in the returned object is then standard updating of values in a js object.