CODEWITHSUNDEEP
javascripthtmlloopsobjectlocal-storage
Oscar Godson
Oscar Godson

Reputation: 32716

Looping through localStorage in HTML5 and JavaScript

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.

Upvotes: 134

Views: 145325

Answers (10)

Surya R Praveen
Surya R Praveen

Reputation: 3745

Get all the entries with key and value in Array

let entries = Object.entries(localStorage);

console.log(entries);

Upvotes: 0

Wizard
Wizard

Reputation: 503

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.

Upvotes: 14

BeanSoldier
BeanSoldier

Reputation: 19

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).

Upvotes: 1

Shayan
Shayan

Reputation: 848

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));
}

Upvotes: 3

miksiii
miksiii

Reputation: 2496

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)));

Upvotes: 24

Putra Ardiansyah
Putra Ardiansyah

Reputation: 5853

The simplest way is:

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

Upvotes: 65

BlastWave
BlastWave

Reputation: 797

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.

Upvotes: 2

user2878805
user2878805

Reputation:

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.

Upvotes: 4

WispyCloud
WispyCloud

Reputation: 4230

This works for me in Chrome:

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

Upvotes: 9

Matthew Flaschen
Matthew Flaschen

Reputation: 284786

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));

Upvotes: 176

Related Questions