javascript - 本地存储 : Change value for a specific array using Stringify

Question

我不知道这个问题是否非常准确，但我正在尝试更改本地存储数组中的值。

这是我的本地存储的样子:

[{"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 ？

我假设它会是这样的:

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

编辑:

我已经实现了从本地存储中检索数据:这是工作 fiddle :http://jsfiddle.net/kZN4y/ .使用相同的编码，我想更新更新点击中提到的值。这可能吗？

谢谢

Answer 1

就我个人而言，我会毫不犹豫地创建处理完整对象的函数，在您的情况下是这样的:

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

注意:在这个例子中我使用了 sessionStorage 而不是 localStorage，但是接口(interface)是一样的，都使用 Storage 原型(prototype)。

如您所见，我将每个项目的结构更改为如下所示:{'item-3': {'href': 'google.com', 'icon': 'google.png'}}。我这样做是因为它更好地反射(reflect)了 javascript、localStorage 和键/值的整体概念，并且大大简化了使用。

在这个例子中你有:

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

对我来说，这看起来是一种非常实用的处理 localStorage 的方法。

此外，“setBlob”函数可以处理每个项目的随机和可变数量的元素。如果需要，这允许您拥有一个具有 5 个属性的项目，而所有其他项目具有 2 个属性。只要有一个名为“id”的元素，它就可以与您的“平面”结构一起使用。

编辑:调试，并切换到更经典的 setValue(key, item);