在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){
    console.log(localStorage[x]);
}

但无济于事。有任何想法吗？

我的另一个想法是

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

在其中for...in工作。

您可以使用该key方法。 localStorage.key(index)返回index第一个键（顺序是实现定义的，但是在添加或删除键之前是恒定的）。

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

最简单的方法是：

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

除了所有其他答案，您还可以使用jQuery库中的$ .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));
}

在此之前的答案的基础上，该函数将在不知道键值的情况下通过键在本地存储中循环。

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

如果检查控制台输出，您将看到代码中添加的所有项目都具有typeof字符串。内置项是功能{[native code]}，或者在length属性的情况下为数字。您可以使用typeofKey变量仅对字符串进行过滤，以便仅显示您的项目。

请注意，即使您将数字或布尔值存储为值，这也可行，因为它们都存储为字符串。

所有这些答案都忽略了跨浏览器的localStorage实现之间的差异。该领域的贡献者应充分利用他们所描述的平台来限定他们的回答。https://developer.mozilla.org/en/docs/Web/API/Window/localStorage记录了一种浏览器范围的实现 ，尽管功能非常强大，但仅包含一些核心方法。遍历内容需要了解特定于各个浏览器的实现。

localStorage是一个Object。

我们可以像其他任何对象一样使用JavaScript for / in语句遍历它。

然后，我们将用于.getItem()访问每个键（x）的值。

for (x in localStorage){
    console.log(localStorage.getItem(x));
}