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

roselan · Accepted Answer · 2011-11-12T15:35:16.603

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

Thank you for your answer. You're example makes me change my entire web app which I can't really do. I do already retrieve the data, but its the update of what I haven't achieved. Here is my working fiddle: http://jsfiddle.net/kZN4y/ . Using the same coding, I want to update the value mentioned in the update click. Is that possible? — jQuerybeast, Nov 12 '11 at 15:22
hmmm, [check your updated fiddle](http://jsfiddle.net/kZN4y/5/), I did create a set href, function. (and a filter callback, for the kicks ^^). and the demo handling it (not the "re-storage" of "json" at the end, to save the updated href) — roselan, Nov 12 '11 at 16:02
[and this one](http://jsfiddle.net/kZN4y/7/) for a more "standard" approach. (and please accept, if it answers your question ^^) — roselan, Nov 12 '11 at 16:25
How can I delete a value using the same method of this one: http://jsfiddle.net/kZN4y/7/ ? — jQuerybeast, Nov 14 '11 at 19:15
sure: [here it is](http://jsfiddle.net/kZN4y/30/). I did change the set function a bit too (no need to return an object) — roselan, Nov 14 '11 at 20:39

Geuis · Answer 2 · 2011-11-12T14:02:25.850

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.

Thank you. I already retrieve the values from the localstorage and it seems you are using a different way of doing it which I can't really change the entire schema of my web app. This is how I retrieve the data: http://jsfiddle.net/kZN4y/ . Using the same code, I want to update the value mentioned in the update click. — jQuerybeast, Nov 12 '11 at 15:24

Localstorage: Change value for a specific array using Stringify

2 Answers2

Linked