通过HTML5和JavaScript中的localStorage循环

Question

所以,我认为我可以像普通对象一样循环遍历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确实有效.

Answer 1

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

Answer 2

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

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

  // key magic
  // value magic

});

最终,获取对象:

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

Answer 3

最简单的方法是:

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

Answer 4

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

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

Answer 5

这适用于Chrome:

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

Answer 6

localStorage是一个Object。

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

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

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