Iterate over all keys stored in localStorage in JavaScript

# Table of Contents

# Iterate over all keys stored in localStorage in JavaScript

To iterate over all keys stored in localStorage using JavaScript:

Use the Object.keys() method to get an array of the keys stored in localStorage.
Use the Array.forEach() method to iterate over the array of keys.
use the localStorage.getItem() method to get the value of each key.

index.js

Copied!
// 👇️ if you need to clear localStorage
// localStorage.clear();

localStorage.setItem('site', 'bobbyhadz.com');
localStorage.setItem('topic', 'JavaScript');
localStorage.setItem('foo', 'bar');

Object.keys(localStorage).forEach(key => {
  console.log(`${key} - ${localStorage.getItem(key)}`);
});

The code for this article is available on GitHub

The code sample sets the site, topic and foo keys in localStorage.

iterate over all keys in local storage

We used the Object.keys() method to get an array of the keys that are stored in the localStorage object.

index.js

Copied!
localStorage.setItem('site', 'bobbyhadz.com');
localStorage.setItem('topic', 'JavaScript');
localStorage.setItem('foo', 'bar');

// 👇️ ['topic', 'foo', 'site']
console.log(Object.keys(localStorage));

Once we have the array of keys, we can use the Array.forEach() method to iterate over it.

index.js

Copied!
Object.keys(localStorage).forEach(key => {
  console.log(`${key} - ${localStorage.getItem(key)}`);
});

On each iteration, we log the current key and use the localStorage.getItem() method to get the corresponding value.

You can also use the for...of loop in a similar way.

index.js

Copied!
localStorage.setItem('site', 'bobbyhadz.com');
localStorage.setItem('topic', 'JavaScript');
localStorage.setItem('foo', 'bar');

for (const key of Object.keys(localStorage)) {
  console.log(key, localStorage.getItem(key));
}

The code for this article is available on GitHub

# Using the `Object.entries()` method to iterate over `localStorage`

You can also use the Object.entries() method to iterate over the key-value pairs in localStorage.

index.js

Copied!
localStorage.setItem('site', 'bobbyhadz.com');
localStorage.setItem('topic', 'JavaScript');
localStorage.setItem('foo', 'bar');

for (const [key, value] of Object.entries(localStorage)) {
  // topic JavaScript
  // foo bar
  // site bobbyhadz
  console.log(key, value);
}

The Object.entries() method returns an array of the key-value pairs that are stored in localStorage.

index.js

Copied!
localStorage.setItem('site', 'bobbyhadz.com');
localStorage.setItem('topic', 'JavaScript');
localStorage.setItem('foo', 'bar');

// [
//     [
//         "topic",
//         "JavaScript"
//     ],
//     [
//         "foo",
//         "bar"
//     ],
//     [
//         "site",
//         "bobbyhadz.com"
//     ]
// ]
console.log(Object.entries(localStorage));

The code for this article is available on GitHub

We used destructuring assignment to assign each key and value to variables.

# Using a `for` loop to iterate over `localStorage` in JavaScript

You can also use a basic for loop to iterate over localStorage in JavaScript.

index.js

Copied!
// 👇️ if you need to clear localStorage
// localStorage.clear();

localStorage.setItem('site', 'bobbyhadz.com');
localStorage.setItem('topic', 'JavaScript');
localStorage.setItem('foo', 'bar');

for (let index = 0; index < localStorage.length; index++) {
  const key = localStorage.key(index);
  const value = localStorage.getItem(key);

  // topic - JavaScript
  // foo - bar
  // site - bobbyhadz.com
  console.log(`${key} - ${value}`);
}

We used a for loop to iterate localStorage.length times.

The length property on the localStorage object returns the number of key-value pairs it stores.

On each iteration, we use the localStorage.key() method to get the key by the current index and use localStorage.getItem() to get the corresponding value.

# Don't use the `for...in` loop to iterate over `localStorage`

Some examples use the for...in loop to iterate over localStorage.

index.js

Copied!
localStorage.setItem('site', 'bobbyhadz.com');
localStorage.setItem('topic', 'JavaScript');
localStorage.setItem('foo', 'bar');

for (const key in localStorage) {
  console.log(key, localStorage.getItem(key));
}

The code for this article is available on GitHub

However, the for...in loop iterates over all properties of the localStorage object, including the inherited ones (from the object's prototype).

Running the code sample above produces the following output.

index.js

Copied!
topic JavaScript
foo bar
site bobbyhadz.com
length null
clear null
getItem null
key null
removeItem null
setItem null

dont use for in loop to iterate over local storage

Notice that we logged all properties from the localStorage object and its prototype chain.

This is most likely not what you want.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Iterate over all keys stored in localStorage in JavaScript

# Table of Contents