在 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在其中起作用。

126752 次浏览
小开
最佳答案

您可以使用 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));
小开

这对我在 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 字符串。而内置项要么是函数{[本机代码]} ，要么在 length 属性的情况下是一个数字。您可以使用 typeofKey 变量仅对字符串进行筛选，以便只显示项目。

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

小开

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

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


// key magic
// value magic


});

最后，用以下方法得到物体:

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

小开

所有这些答案都忽略了不同浏览器的 localStorage 实现之间的差异。 这个领域的贡献者应该使用他们所描述的平台严格限定他们的响应。 一个浏览器范围的实现记录在 Https://developer.mozilla.org/en/docs/web/api/window/localstorage 虽然非常强大，但只包含几个核心方法。通过内容进行循环需要理解特定于各个浏览器的实现。

小开

The simplest way is:

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

是 Object。

我们可以像其他对象一样使用 语句的 JavaScript循环通过它。

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

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

LocalStorage 将数据保存为键-值对，函数 localStorage.getItem (key)可以访问这些值，它接受一个键作为参数，并返回给定键的键-值对的值。

可以使用函数 localStorage.setItem (key，value)设置 localStorage 的键值对。

如果要循环访问 localStorage，可以使用数字作为键。

localStorage.setItem(localStorage.length, value);

通过上面的这条指令，您可以向 localStorage 追加一个具有升序键的值，因为每次调用都会增加 localStorage 的长度。

现在可以使用以下 for-loop 迭代 localStorage。

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

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

小开 
for (const [key, value] of Object.entries(localStorage)) {
console.log(key, value);
}

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


提交答案