如何在 localStorage 中存储数组?

IT技术 javascript arrays html local-storage
2021-01-26 09:10:51

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

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

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

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

我哪里错了?

6个回答

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);
有人可以解释为什么你必须这样做以及发生了什么吗?
2021-03-19 09:10:51
@SaifBechan 别担心 IE 6/7,我们正在谈论 localStorage
2021-03-21 09:10:51
IE7 及更早版本不支持 JSON。
2021-03-28 09:10:51
@JonathanTonge,JSON.parse(localStorage["names"] || null)如果你愿意,你可以做类似的事情
2021-04-03 09:10:51
@Howdy_McGee 由于localStorage仅支持字符串,因此必须将数组转换为字符串格式。最好的方法是将其转换为JSON数组,因为它很容易在两种状态之间转换(JSON只是一段很长的字符串数据)。JSON如果那是您不明白的内容,您可能需要继续阅读:)
2021-04-04 09:10:51

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 返回。

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

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

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

刚刚创建了这个:

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');
这是我正在寻找的那种东西,除了它会遍历所提供对象的键并在每个键中保存(单个)链接值。非常感谢启发。
2021-03-10 09:10:51

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)(我会对此发表评论回复,但不能)。