ChatGPT解决这个技术问题 Extra ChatGPT

如何在 localStorage 中存储数组? [复制]

这个问题在这里已经有了答案:How to store objects in HTML5 localStorage (24 answers) 9年前关闭。

如果我不需要 localStorage,我的代码将如下所示:

var names=new Array(); 
names[0]=prompt("New member name?");

这行得通。但是,我需要将此变量存储在 localStorage 中,事实证明它非常顽固。我试过了:

var localStorage[names] = new Array();
localStorage.names[0] = prompt("New member name?");

我哪里错了?

我已经发布了一个完整的解决方案,用于在作为副本关闭的线程中维护 localStorage 或 sessionStorage 中的数组,因为下线程确实回答了 Dave 最初提出的问题:stackoverflow.com/a/23516713/2208713。希望它可以帮助一些人。
处理这种情况的简单方法,您可以使用 opendb 库非常充分地处理数组、对象。您可以点击此链接 github.com/pankajbisht/openDB

i
imprfekt

localStorage 仅支持字符串。使用 JSON.stringify()JSON.parse()

var names = [];
names[0] = prompt("New member name?");
localStorage.setItem("names", JSON.stringify(names));

//...
var storedNames = JSON.parse(localStorage.getItem("names"));

您还可以使用直接访问设置/获取项目:

localstorage.names = JSON.stringify(names);
var storedNames = JSON.parse(localStorage.names);

IE7 及更早版本不支持 JSON。
@SaifBechan 不要担心 IE 6/7,我们正在谈论 localStorage
我会在解析之前测试 localStorage['names'] 是否返回一个值,否则会引发错误。
@JonathanTonge,如果你愿意,你可以做类似 JSON.parse(localStorage["names"] || null) 的事情。
@SaifBechan if(typeof JSON == "undefined") { alert("Upgrade your browser."); }
S
Sebastian

localStoragesessionStorage 只能处理字符串。您可以扩展默认存储对象来处理数组和对象。只需包含此脚本并使用新方法:

Storage.prototype.setObj = function(key, obj) {
    return this.setItem(key, JSON.stringify(obj))
}
Storage.prototype.getObj = function(key) {
    return JSON.parse(this.getItem(key))
}

使用 localStorage.setObj(key, value) 保存数组或对象,使用 localStorage.getObj(key) 检索它。相同的方法适用于 sessionStorage 对象。

如果您只是使用新方法访问存储,则每个值都会在保存和解析之前转换为 JSON 字符串,然后再由 getter 返回。


如果您需要所有这些,您将如何检索它们?
存储对象提供属性“length”来确定已保存对象的计数,并提供方法“key(int index)”来获取当前键。因此,您可以尝试:for (var i = 0; i < localStorage.length; i++) console.log( localStorage.key(i) +" has value " + localStorage[localStorage.key(i)] )
@Sebastian 在某些情况下使用 localStorage.length 可能是错误的,如果该网站也是 localStorage 来存储一些东西。
您可以为模块特定值添加前缀,并在迭代 localStorage 的所有元素时删除带有该前缀的所有内容。
我在我的解决方案中使用了相同的方法,它为 localStorage 的工作方式提供了一个简约的界面 :) github.com/zevero/simpleWebstorage
M
Matt

按照 no! 的建议使用 JSON.stringify()JSON.parse()!这可以防止包含分隔符的成员名称(例如,成员名称 three|||bars)可能很少见但可能出现问题。


你能告诉我们一个更好的选择吗?
这没有提供问题的答案。要批评或要求作者澄清,请在他们的帖子下方留下评论。
@ChiefTwoPencils 您在标记之前阅读过评论吗?
@J0HN:是的,我做到了。从什么时候开始,会员的声誉成为打破规则的好理由?事实上,推荐删除的自动消息不是特别提到不要发布评论作为答案,并建议发布者等到他们有足够的声誉来评论和投票之前?海报说这不是答案;还需要什么证据?
@ChiefTwoPencils:一些历史背景:当我发布此评论时,接受的答案建议使用“|||”进行连接和拆分由伊恩(注意:这个答案不再存在)。因为我认为这个答案实际上有害,所以我发布了我的答案。今天,我不再需要我的不回答(正确的答案被接受并且有健康的赞成票)。我对指南不太熟悉:可以/建议删除我的“答案”吗?
j
jonsca

刚刚创建了这个:

https://gist.github.com/3854049

//Setter
Storage.setObj('users.albums.sexPistols',"blah");
Storage.setObj('users.albums.sexPistols',{ sid : "My Way", nancy : "Bitch" });
Storage.setObj('users.albums.sexPistols.sid',"Other songs");

//Getters
Storage.getObj('users');
Storage.getObj('users.albums');
Storage.getObj('users.albums.sexPistols');
Storage.getObj('users.albums.sexPistols.sid');
Storage.getObj('users.albums.sexPistols.nancy');

这是我一直在寻找的东西,除了它会遍历所提供对象的键并在每个对象中保存(单个)链接值。非常感谢启发。
L
Lassi Kinnunen

JSON 方法有效,在 ie 7 上,您需要 json2.js,它可以完美运行,尽管有一条评论说否则有 localStorage。这似乎是最省事的最佳解决方案。当然,人们可以编写脚本来做与 json2 基本相同的事情,但这没什么意义。

至少使用以下版本字符串有localStorage,但如上所述,您需要包含json2.js,因为浏览器本身不包含它:4.0(兼容;MSIE 7.0;Windows NT 6.1;WOW64;Trident/5.0;SLCC2 ; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; BRI/2; NP06; .NET4.0C; .NET4.0E; Zune 4.7)(我会对此发表评论)回复,但不能)。


Z
Znarkus

另一种解决方案是编写一个像这样存储数组的包装器:

localStorage.setItem('names_length', names.length);
localStorage.setItem('names_0', names[0]);
localStorage.setItem('names_1', names[1]);
localStorage.setItem('names_' + n, names[n]);

消除了转换为 JSON 的开销,但如果您需要删除元素会很烦人,因为您必须重新索引数组 :)


杀死不 JSONifying 的性能增益。
使用 names_keys 而不是 names_length,您无需重新索引!这也将允许您使用字符串键。当然,这只有在数组元素有点长的情况下才有意义。
@PiTheNumber 如果 names_keys 包含一个索引数组,那不是鸡/蛋的情况吗?
@Znarkus 正如我所说,这仅对休数组元素有意义。例如,如果每个元素有 100KB,最好使用带有 keys 的小条目。
@PiTheNumber 休是什么?