在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)返回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));