如何循环遍历localStorage值

Question

我正在创建一个您在食谱名称和成分中编写的React应用程序，它们将在页面上显示为每个创建的食谱。我打算使用.map来创建列表项，但我需要一个数组来处理它，而localStorage不是一个数组（我相信无论如何）。是否有办法将localStorage中的每个密钥传输到一个数组？

localStorage，每次你点击＆＃34;添加食谱＆＃34;按钮，添加＆＃34;食谱名称＆＃34;加上一个用于订购的号码。配方本身就是价值。我只想将配方添加到数组中以及.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));
}