Как перебирать значения localStorage

Question

Я создаю приложение React, которое вы пишете в названии рецепта и ингредиентах, и они будут отображаться в виде списка на странице для каждого созданного рецепта. Я собирался использовать .map для создания элементов списка, но мне нужен массив для работы с ним, а localStorage - это не массив (я считаю, что так или иначе). Будет ли способ переносить каждый ключ в localStorage на массив?

LocalStorage, каждый раз, когда вы нажимаете кнопку «добавить рецепт», добавляется ключ «имя рецепта» плюс номер для заказа. Значение - это сам рецепт. Я просто хочу добавить рецепты в массив, а также для .map.

Answer 1

Попробуйте использовать Object.keys(localStorage). Как вы запросили ключ:

var arrayOfKeys = Object.keys(localStorage); 

Легко, как это! Это возвращает массив ключей. Теперь, если вы хотите, чтобы значения:

var arrayOfValues = Object.values(localStorage); 

Он возвращает массив.

Обратите внимание, что Object.values является экспериментальным, поэтому альтернатива будет:

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

Answer 2

Вы можете использовать localStorage.length, это даст общее количество ключей, присутствующее в localStorage. Перебор с помощью этой длины и использовать localStorage.key(index), чтобы получить имя ключа, например:

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