通过HTML5和JavaScript中的localStorage循环播放

所以,我想我可以只是像一个普通的对象循环localStorage,因为它有一个长度。 我怎么能通过这个循环?

localStorage.setItem(1,'Lorem'); localStorage.setItem(2,'Ipsum'); localStorage.setItem(3,'Dolor'); 

如果我做一个localStorage.length它返回3这是正确的。 所以我会假设一个for...in循环会起作用。

我在想像这样的东西:

 for (x in localStorage){ $('body').append(localStorage[x]); } 

但没有用。 有任何想法吗?

我的另一个想法是类似的

 localStorage.setItem(1,'Lorem|Ipsum|Dolor') var split_list = localStorage.getItem(1).split('|'); 

其中for...in工作。

您可以使用key方法。 localStorage.key(index)返回index th键(该顺序是实现定义的,但是直到你添加或移除键为止)。

 for (var i = 0; i < localStorage.length; i++){ $('body').append(localStorage.getItem(localStorage.key(i))); } 

如果顺序很重要,你可以存储一个JSON序列化的数组:

 localStorage.setItem("words", JSON.stringify(["Lorem", "Ipsum", "Dolor"])); 

规范草案声称任何支持结构化克隆的对象都可以是一个值。 但是,这似乎还没有得到支持。

编辑:加载数组,添加到它,然后存储:

 var words = JSON.parse(localStorage.getItem("words")); words.push("hello"); localStorage.setItem("words", JSON.stringify(words)); 

除了所有其他的答案,你可以使用$ .each函数:

 $.each(localStorage, function(key, value){ // key magic // value magic }); 

最终,获取对象:

JSON .parse(localStorage.getItem(localStorage.key(key)));

这在Chrome中适用于我:

 for(var key in localStorage) { $('body').append(localStorage.getItem(key)); } 

最简单的方法是:

 Object.keys(localStorage).forEach(function(key){ console.log(localStorage.getItem(key)); }); 

这里build立在前面的答案是一个函数,它将循环访问本地存储而不知道键值。

 function showItemsByKey() { var typeofKey = null; for (var key in localStorage) { typeofKey = (typeof localStorage[key]); console.log(key, typeofKey); } } 

如果您检查控制台输出,您会看到您的代码添加的项目都有一个typeofstring。 而内置的项目是函数{[本机代码]}或在长度属性的情况下一个数字。 您可以使用typeofKeyvariables来过滤string,只显示您的项目。

请注意,即使您将数字或布尔值存储为值,因为它们都以stringforms存储。

所有这些答案都忽略了跨浏览器的localStorage实现之间的差异。 这个域名的贡献者应该严格按照他们所描述的平台对他们的回应进行评估。 一个浏览器范围的实现logging在https://developer.mozilla.org/en/docs/Web/API/Window/localStorage ,虽然非常强大,但只包含一些核心方法。 循环浏览内容需要了解特定于各个浏览器的实现。