Looping through localStorage in HTML5 and JavaScript

The simplest way is:

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

In addition to all the other answers, you can use $.each function from the jQuery library:

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

  // key magic
  // value magic

});

Eventually, get the object with:

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

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

Here we are looping through each key and value respectively in local storage.

This works for me in Chrome:

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

Building on the previous answer here is a function that will loop through the local storage by key without knowing the key values.

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

If you examine the console output you will see the items added by your code all have a typeof string. Whereas the built-in items are either functions { [native code] } or in the case of the length property a number. You could use the typeofKey variable to filter just on the strings so only your items are displayed.

Note this works even if you store a number or boolean as the value as they are both stored as strings.

localStorage is an Object.

We can loop through it with JavaScript for/in Statement just like any other Object.

And we will use .getItem() to access the value of each key (x).

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

All of these answers ignore the differences between the implementations of localStorage across browsers. Contributors in this domain should heavily qualify their responses with the platforms they are describing. One browser-wide implementation is documented at https://developer.mozilla.org/en/docs/Web/API/Window/localStorage and, whilst very powerful, only contains a few core methods. Looping through the contents requires an understanding of the implementation specific to individual browsers.

The localStorage saves data as key-value pairs and the values can be accessed by the function localStorage.getItem(key), which takes a key as parameter and returns the value of the key-value pair with the given key.

The key-value pairs of the localStorage can be set with the function localStorage.setItem(key, value).

If you want to iterate through the localStorage you can use numbers as keys.

localStorage.setItem(localStorage.length, value);

With this instruction above you are appending a value with an ascending key to the localStorage, because the length of the localStorage is increased by each call.

Now the localStorage can be iterated with the following for-loop.

for (let i = 0; i < localStorage.length; i++){
  console.log(localStorage.getItem(i));
} 

It does not matter if you use "let" or "var" to declare a variable. The difference between both is the scope. If you want to know more about the difference between let and var, I would recommend you the explanation by tutorialspoint (https://www.tutorialspoint.com/difference-between-var-and-let-in-javascript).

Get all the entries with key and value in Array

let entries = Object.entries(localStorage);

console.log(entries);