Looping through localStorage in HTML5 and JavaScript

html, javascript, local-storage, loops, object

Solution

You can use the `key` method. `localStorage.key(index)` returns the `index`th key (the order is implementation-defined but constant until you add or remove keys).

for (var i = 0; i < localStorage.length; i++){
    $('body').append(localStorage.getItem(localStorage.key(i)));
}

If the order matters, you could store a JSON-serialized array:

localStorage.setItem("words", JSON.stringify(["Lorem", "Ipsum", "Dolor"]));

The draft spec claims that any object that supports structured clone can be a value. But this doesn't seem to be supported yet.

EDIT: To load the array, add to it, then store:

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

Problem

So, I was thinking I could just loop through localStorage like a normal object as it has a length. How can I loop through this? ``` localStorage.setItem(1,'Lorem'); localStorage.setItem(2,'Ipsum'); localStorage.setItem(3,'Dolor'); ``` If I do a `localStorage.length` it returns `3` which is correct. So I'd assume a `for...in` loop would work. I was thinking something like: ``` for (x in localStorage){ console.log(localStorage[x]); } ``` But no avail. Any ideas? The other idea I had was something like ``` localStorage.setItem(1,'Lorem|Ipsum|Dolor') var split_list = localStorage.getItem(1).split('|'); ``` In which the `for...in` does work.

Original source

Related problems