Skip to main content

How to Iterate Over All Items in localStorage in JavaScript

The localStorage object provides a simple way to store key-value pairs in a user's browser, but it behaves differently from a plain JavaScript object when it comes to iteration. Because it's a Storage object, you cannot simply use standard object iteration methods without being mindful of its built-in properties.

This guide will teach you the three correct and reliable methods for looping through all the keys and values you have stored in localStorage. You will learn why the common for...in loop is the wrong tool for this job and see how to use a standard for loop, Object.keys(), and Object.entries() correctly.

The Core Problem: localStorage is Not a Plain Object​

While you can access localStorage items like object properties (e.g., localStorage.myKey), the localStorage object itself is an instance of the Storage interface. This means it comes with its own built-in properties and methods, such as length, setItem, getItem, and clear. A common mistake is to use an iteration method that accidentally includes these built-in members.

For example, lets' add some items to localStorage:

localStorage.setItem('user', 'Alice');
localStorage.setItem('theme', 'dark');

We now want to loop through only the items we added (user and theme), not the built-in properties of the Storage object.

This is the most modern and readable approach. Object.keys() returns an array containing only the keys of the items you have stored, which you can then iterate over with any standard array method.

localStorage.setItem('user', 'Alice');
localStorage.setItem('theme', 'dark');

// Get an array of your keys
const keys = Object.keys(localStorage); // ['user', 'theme']

// Iterate over the array of keys
keys.forEach(key => {
  const value = localStorage.getItem(key);
  console.log(`${key}: ${value}`);
});

Output:

user: Alice
theme: dark

This method is clean, explicit, and leverages familiar array methods.

Method 2: A Standard for Loop with localStorage.key()​

The localStorage object has a length property and a key(index) method, which are specifically designed for this kind of iteration. This is a more traditional but perfectly valid and efficient approach.

localStorage.setItem('user', 'Alice');
localStorage.setItem('theme', 'dark');

for (let i = 0; i < localStorage.length; i++) {
  // Get the key at the current index
  const key = localStorage.key(i);
  
  // Get the value associated with that key
  const value = localStorage.getItem(key);
  
  console.log(`${key}: ${value}`);
}

Output:

user: Alice
theme: dark
note

This method works well and doesn't require creating an intermediate array of keys, which can be a minor performance benefit if localStorage contains an enormous number of items.

The Pitfall: Why You Should Not Use a for...in Loop​

A for...in loop is designed to iterate over the enumerable properties of an object, including properties from its prototype chain. This is why it is the wrong tool for iterating over localStorage.

localStorage.setItem('user', 'Alice');

// This is the WRONG way to iterate!
for (const key in localStorage) {
  console.log(key);
}

Incorrect Output: (this will log not only your keys but also all the built-in properties of the Storage object.)

user
length
clear
getItem
key
removeItem
setItem
... and so on
note

This is almost never the desired behavior. The for...in loop should generally be avoided for iterating over collections unless you are carefully checking for property ownership with Object.hasOwn().

Conclusion​

Iterating over localStorage is simple and safe as long as you use the correct methods that are designed to access only the data you've stored.

  • The Object.keys(localStorage).forEach() pattern is the recommended best practice for modern JavaScript. It is highly readable and uses standard, familiar array methods.
  • The traditional for loop with localStorage.length and localStorage.key(i) is a perfectly valid and efficient alternative that is supported in all browsers.
  • Never use a for...in loop to iterate over localStorage, as it will incorrectly include the built-in properties and methods of the Storage object.

Table of Contents