就个人而言,我会毫不犹豫地创建处理完整对象的函数,在您的情况下,例如:
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 原型。
如您所见,我将每个项目的结构更改为:{'item-3': {'href': 'google.com', 'icon': 'google.png'}}。我这样做是因为它更好地反映了 javascript、localStorage 和键/值的整体概念,并且大大简化了使用。
在这个例子中,你有:
var item = sessionStorage.getObject(key);
item.href = 'stackoverflow.com';
sessionStorage.setObject(key, item);
对我来说,这看起来是一种非常实用的处理 localStorage 的方法。
此外,“setBlob”函数可以处理每个项目的随机和可变数量的元素。如果需要,这允许您拥有一个具有 5 个属性的项目,而所有其他项目都有 2 个。只要有一个使用键“id”调用的元素,它就可以与您的“平面”结构一起使用。
编辑:调试,并切换到更经典的 setValue(key, item);