如何循环访问 localStorage 值答案

【问题标题】：How to loop through localStorage values如何循环访问 localStorage 值
【发布时间】：2017-05-07 08:49:37
【问题描述】：

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

localStorage 每次点击“添加配方”按钮时，都会添加一个“配方名称”键和一个用于订购目的的数字。值就是配方本身。我只想将食谱也添加到 .map 的数组中。

【问题讨论】：

【解决方案1】：

尝试使用Object.keys(localStorage)。当您请求 key 时：

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]);
    }
}

【讨论】：

【解决方案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));
}

【讨论】：