How to loop through localStorage values

Question

I am creating a React application that you write in a recipe name and ingredients, and they will appear as a list on the page for each recipe created. I was going to use .map to create the list items, but I need an array to work with that and the localStorage is not an array(I believe anyways). Would there be a way to transport each key in the localStorage to an array?

The localStorage, each time you hit the "add recipe" button, adds a key of "recipe name" plus a number for ordering purposes. The value is the recipe itself. I just want to add the recipes to an array as well for .map.

Answer 1

Try using Object.keys(localStorage). As you requested a key:

var arrayOfKeys = Object.keys(localStorage);

Easy as that! That returns an array of keys. Now, if you want the values:

var arrayOfValues = Object.values(localStorage);

It returns an array.

Note that Object.values is experimental, so an alternative would be:

var arrayOfValues = [];
for(var i in localStorage){
    if(localStorage.hasOwnProperty(i)){
        arrayOfValues.push(localStorage[i]);
    }
}

Answer 2

You can use localStorage.length, it will give the total count of keys present in localStorage. Iterate using this length and use localStorage.key(index) to get the key name, like this:

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