114

所以，我在想我可以像普通对象一样循环遍历 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工作。

4

9 回答 9

161

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

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));
于 2010-06-29T07:13:38.003 回答
50

最简单的方法是：

Object.keys(localStorage).forEach(function(key){
   console.log(localStorage.getItem(key));
});
于 2016-05-29T08:48:11.257 回答
25

除了所有其他答案之外，您还可以使用jQuery 库中的$.each函数：

$.each(localStorage, function(key, value){

  // key magic
  // value magic

});

最终，通过以下方式获取对象：

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

于 2015-01-25T00:02:32.330 回答
10

这在 Chrome 中对我有用：

for(var key in localStorage) {
  $('body').append(localStorage.getItem(key));
}
于 2013-05-04T07:36:08.670 回答
4

localStorage是一个Object。

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

我们将使用.getItem()来访问每个键（x）的值。

for (x in localStorage){
    console.log(localStorage.getItem(x));
}
于 2019-10-02T12:42:24.140 回答
3

在前面的答案的基础上，这里有一个函数，它将在不知道键值的情况下按键循环遍历本地存储。

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

如果您检查控制台输出，您将看到您的代码添加的项目都有一个 typeof 字符串。而内置项目要么是函数 { [native code] }，要么是长度属性的数字。您可以使用 typeofKey 变量仅对字符串进行过滤，以便仅显示您的项目。

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

于 2015-01-04T00:55:57.130 回答
2 
for (const [key, value] of Object.entries(localStorage)) {
   console.log(key, value);
}

在这里，我们分别遍历本地存储中的每个键和值。

于 2021-07-24T05:44:33.457 回答
1

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

于 2016-02-12T02:44:49.953 回答
1

localStorage 将数据保存为键值对，并且可以通过函数 localStorage.getItem(key) 访问这些值，该函数以键为参数并返回具有给定键的键值对的值。

localStorage 的键值对可以通过函数 localStorage.setItem(key, value) 来设置。

如果要遍历 localStorage，可以使用数字作为键。

localStorage.setItem(localStorage.length, value);

使用上面的这条指令，您将一个带有升序键的值附加到 localStorage，因为每次调用都会增加 localStorage 的长度。

现在可以使用以下 for 循环迭代 localStorage。

for (let i = 0; i < localStorage.length; i++){
  console.log(localStorage.getItem(i));
}

使用“let”或“var”来声明变量都没有关系。两者的区别在于范围。如果您想更多地了解 let 和 var 之间的区别，我建议您通过 tutorialspoint ( https://www.tutorialspoint.com/difference-between-var-and-let-in-javascript ) 进行解释。

于 2021-05-27T18:41:35.233 回答