在 HTML5 和 JavaScript 中循环访问 localStorage

Posted

技术标签:

【中文标题】在 HTML5 和 JavaScript 中循环访问 localStorage【英文标题】:Looping through localStorage in HTML5 and JavaScript 【发布时间】:2011-03-09 11:44:44 【问题描述】:

所以,我想我可以像普通对象一样循环遍历 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 在其中起作用。

【问题讨论】:

另见:Get html5 localStorage keys 【参考方案1】:
for (const [key, value] of Object.entries(localStorage)) 
   console.log(key, value);

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

【讨论】:

【参考方案2】:

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) 的解释。

【讨论】:

【参考方案3】:

localStorage 是一个Object

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

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

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

【讨论】:

【参考方案4】:

除了所有其他答案,您还可以使用 jQuery 库中的$.each function:

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

  // key magic
  // value magic

);

最终,通过以下方式获取对象:

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

【讨论】:

这仅在您使用 jQuery 时有效。 $ 用于其他库,也经常用作document.querySelectorAll 的别名。该问题也未标记为 [jquery] 问题。【参考方案5】:

最简单的方法是:

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

【讨论】:

这对我有用。出于某种原因使用$.each(localStorage, function(key, value) 将localStorage 函数(即cleaR)包含在密钥列表中。 @TheoretiCAL 可能是因为你已经覆盖了原型。【参考方案6】:

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

【讨论】:

您能否举例说明其中一个答案如何在浏览器上不起作用?这是很久以前的事了,但我不记得在循环使用这些答案时遇到任何问题 我打算将我的评论添加到整个流中,而不是这个特定的帖子,并且可能有点苛刻。当时我很沮丧,试图找到一个跨浏览器的解决方案。 Steve Isenberg 的示例(如下)包含 for (var key in localStorage) typeofKey = (typeof localStorage[key]); console.log(key, typeofKey);不适用于 webKit 实现(试试吧!) 这确实有效: for ( var i = 0; i 【参考方案7】:

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

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

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

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

【讨论】:

【参考方案8】:

这在 Chrome 中适用于我:

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

【讨论】:

究竟是哪一部分?这个 sn-p 根据原始问题使用 jQuery。你可以在 chrome js 控制台中试试这个吗? for(var key in localStorage) console.log(localStorage.getItem(key)); @jtblin 我刚试了一下,它返回了TypeError: Cannot call method 'toString' of null,所以我假设'key'返回null 这适用于 Chrome、Safari 和 Firefox 的最新版本 @JuanCarlosAlpizarChinchilla 代码中没有“toString”,所以¯_(ツ)_/¯。正如上面评论中所指出的,在所有最近的浏览器中都可以正常工作。 @jtblin 我的评论已经两年了,所以¯_(ツ)_/¯ 感谢您的提醒【参考方案9】:

您可以使用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"]));

规范草案声称任何支持structured clone 的对象都可以是一个值。但这似乎还不支持。

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

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

【讨论】:

非常感谢!这正是我一直在寻找的。我还要调查您发送的 JSON 内容。那将是完美的。它适用于 Baby Names Offline HTML5 ios 应用程序。 快速提问,我将如何添加到该 JSON 中?比如,如何在“Dolor”之后添加“hello”? 你摇滚,只是看着,它应该工作。我有理由使用 parse 而不是 eval 吗?我现在使用 eval 从字符串中获取它,但是解析更好/更快吗? @Oscar, parse 更安全,因为它可以保护您免受代码执行的影响。通常,它也快得多。见blog.mozilla.com/webdev/2009/02/12/native-json-in-firefox-31 @BBagi,它返回任何输入,解码。 JSON 文本的顶层可以是对象或数组。试试JSON.parse('["Lorem", "Ipsum", "Dolor"]').length

以上是关于在 HTML5 和 JavaScript 中循环访问 localStorage的主要内容,如果未能解决你的问题,请参考以下文章

无法停止 requestAnimationFrame (Javascript/html5: canvas)

在给定时间后停止HTML5 Javascript动画

在php循环中写入javascript数组

html5或者JS怎样调用手机摄像头或者相册?

html5或者JS怎样调用手机摄像头或者相册

深入理解JavaScript事件循环机制