Localstorage:使用Stringify更改特定数组的值 [英] Localstorage: Change value for a specific array using Stringify

查看:162
本文介绍了Localstorage:使用Stringify更改特定数组的值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我不知道问题是否非常准确,但是我正在尝试从localstorage数组更改值.

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

关键是结果".

如何为id:item-6, href: setItem.因此,例如.项目6,href是asos.com.如何将其更改为stackoverflow.com?

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 ?

我认为会是这样:

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

我已经实现了从本地存储中检索数据: 这是有效的小提琴: http://jsfiddle.net/kZN4y/.使用相同的编码,我想更新更新点击中提到的值.有可能吗?

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?

谢谢

推荐答案

我个人会毫不犹豫地创建处理整个对象的函数,在您的情况下,例如:

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

选中此jsfiddle

注意:在此示例中,我使用sessionStorage而不是localStorage,但是接口相同,都使用Storage原型.

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

如您所见,我将每个项目的结构更改为以下形式:{'item-3':{'href':'google.com','icon':'google.png'}}.我这样做是因为它更好地反映了javascript,localStorage和键/值方式的整体概念,并大大简化了用法.

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.

在此示例中,您有:

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

这对我来说是一种非常实用的处理localStorage的方法.

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

此外,"setBlob"功能可以处理每个项目随机和可变数量的元素.这样一来,您就可以拥有一个具有5个属性的项目,而其他所有项目都有2个属性.只要有一个用键"id"调用的元素,它就可以与您的扁平"结构一起使用.

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

已调试,并切换到更为经典的setValue(key,item);

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

这篇关于Localstorage:使用Stringify更改特定数组的值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆