这个问题在这里已经有了答案: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
仅支持字符串。使用 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);
localStorage
和 sessionStorage
只能处理字符串。您可以扩展默认存储对象来处理数组和对象。只需包含此脚本并使用新方法:
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 返回。
for (var i = 0; i < localStorage.length; i++) console.log( localStorage.key(i) +" has value " + localStorage[localStorage.key(i)] )
按照 no! 的建议使用 JSON.stringify()
和 JSON.parse()
!这可以防止包含分隔符的成员名称(例如,成员名称 three|||bars
)可能很少见但可能出现问题。
刚刚创建了这个:
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');
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)(我会对此发表评论)回复,但不能)。
另一种解决方案是编写一个像这样存储数组的包装器:
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 的开销,但如果您需要删除元素会很烦人,因为您必须重新索引数组 :)
names_keys
而不是 names_length
,您无需重新索引!这也将允许您使用字符串键。当然,这只有在数组元素有点长的情况下才有意义。
names_keys
包含一个索引数组,那不是鸡/蛋的情况吗?
keys
的小条目。
不定期副业成功案例分享
localStorage
JSON.parse(localStorage["names"] || null)
的事情。if(typeof JSON == "undefined") { alert("Upgrade your browser."); }