Looping through localStorage in HTML5 and JavaScript

Question

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.

Answer 1

You can use the key method. localStorage.key(index) returns the indexth 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)); 

Answer 2

The simplest way is:

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