Localstorage:使用 Stringify 更改特定数组的值

发布于 2024-12-14 20:18:28 字数 996 浏览 0 评论 0原文

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

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

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

关键是“结果”。

我如何setItemid:item-6, href:。例如。第 6 项的 href 为 asos.com。如何将其更改为 stackoverflow.com

我假设它会是这样的:

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

编辑:

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

谢谢

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

如若梦似彩虹 2024-12-21 20:18:28

就我个人而言,我会毫不犹豫地创建处理完整对象的函数,在您的情况下,类似于:

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< /a>

注意:在这个例子中我使用 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);

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

笛声青案梦长安 2024-12-21 20:18:28

您的问题并不完全清楚,但希望这会有所帮助。

由于 localStorage 是键/值存储,因此每个键必须是唯一的值。如果要存储特定键的 json 对象,则必须对其进行字符串化以进行存储,并对其进行解析以检索它。

通常我会编写几个实用函数来获取/设置值。

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

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

然后在代码中,您将更新从 get() 返回的对象,然后将该对象传递给 set(),这会将其放回到 localStorage 中。

更新返回对象中的值就是 js 对象中值的标准更新。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文