我只是想知道如何获取localStorage 中的所有键值。
我试图用一个简单的 JavaScript 循环来检索值
for (var i=1; i <= localStorage.length; i++) {
alert(localStorage.getItem(i))
}
但只有当键是渐进数字时才有效，从 1 开始。
我如何获取所有键，以便显示所有可用数据？
【问题讨论】：
标签： javascript html key local-storage
您可以使用localStorage.key(index) 函数返回字符串表示形式，其中index 是您要检索的第n 个对象。
【讨论】：
for (var key in localStorage){
console.log(key)
}
编辑：这个答案得到了很多人的支持，所以我想这是一个常见的问题。我觉得我应该感谢任何可能偶然发现我的答案并认为它是“正确”的人，因为它被接受进行更新。事实上，上面的例子并不是真正的正确方法。最好和最安全的方法是这样做：
for ( var i = 0, len = localStorage.length; i < len; ++i ) {
console.log( localStorage.getItem( localStorage.key( i ) ) );
}
【讨论】：
localStorage.length 而不直接使用它？ 2) 为什么要在 for 循环中声明它？ 3) 为什么++i 比i++ 更受欢迎？
++i 绝对不会 使循环从i = 1 开始。括号内的第三个表达式在每次迭代之后 进行评估。 i++ 和 ++i 对 i 的效果完全相同。不同之处在于++i 在递增后计算为i 的new 值，而i++ 在 递增后计算为i 的值。这里完全没有区别，因为我们关心的是递增i 的副作用，而不是表达式的值。
Object.keys(localStorage) 非常适合这种情况，只要您不需要支持 IE
localStorage.key( i ) 部分来实现。
function listAllItems(){
for (i=0; i<localStorage.length; i++)
{
key = localStorage.key(i);
alert(localStorage.getItem(key));
}
}
【讨论】：
如果浏览器支持 HTML5 LocalStorage，它还应该实现 Array.prototype.map，启用此功能：
Array.apply(0, new Array(localStorage.length)).map(function (o, i) {
return localStorage.key(i);
})
【讨论】：
new Array(this.localStorage.length).fill(0) ，感觉比使用 apply imo 少一些hacky。
我同意 Kevin 的观点，他给出了最佳答案，但有时当您在本地存储中拥有具有相同值的不同密钥时，例如您希望公共用户查看他们将物品添加到购物篮中的次数，您需要向他们展示次数，然后你可以使用它：
var set = localStorage.setItem('key', 'value');
var element = document.getElementById('tagId');
for ( var i = 0, len = localStorage.length; i < len; ++i ) {
element.innerHTML = localStorage.getItem(localStorage.key(i)) + localStorage.key(i).length;
}
【讨论】：
我喜欢像这样用它创建一个容易看到的对象。
Object.keys(localStorage).reduce(function(obj, str) {
obj[str] = localStorage.getItem(str);
return obj
}, {});
我也用 cookie 做类似的事情。
document.cookie.split(';').reduce(function(obj, str){
var s = str.split('=');
obj[s[0].trim()] = s[1];
return obj;
}, {});
【讨论】：
由于问题提到了查找键，我想我会提到要显示每个键和值对，你可以这样做（基于凯文的回答）：
for ( var i = 0, len = localStorage.length; i < len; ++i ) {
console.log( localStorage.key( i ) + ": " + localStorage.getItem( localStorage.key( i ) ) );
}
这将以“键：值”格式记录数据
（Kevin：如果您愿意，请随时将此信息纳入您的答案！）
【讨论】：
对于那些提到使用Object.keys(localStorage)...的人，不要因为它在 Firefox 中不起作用（具有讽刺意味的是，因为 Firefox 忠实于规范）。考虑一下：
localStorage.setItem("key", "value1")
localStorage.setItem("key2", "value2")
localStorage.setItem("getItem", "value3")
localStorage.setItem("setItem", "value4")
因为key、getItem和setItem是原型方法Object.keys(localStorage)只会返回["key2"]。
你最好这样做：
let t = [];
for (let i = 0; i < localStorage.length; i++) {
t.push(localStorage.key(i));
}
【讨论】：
object.keys()，key、getItem 和 setItem 将丢失...我将更新我的答案以反映这一点。
[Exposed=Window] 定义了IDL。这导致了我描述的行为。如果它是用[Exposed=Window,OverrideBuiltins] 指定的，它会给出我们期望的行为，但规范没有指定OverrideBuiltins。你可以在 whatwg/html 中看到关于它的讨论：github.com/whatwg/html/issues/183
在 ES2017 中你可以使用：
Object.entries(localStorage)
【讨论】：
Object.keys() 也能按预期工作？
Object.keys()之上
这将打印 localStorage 上的所有键和值：
ES6：
for (let i=0; i< localStorage.length; i++) {
let key = localStorage.key(i);
let value = localStorage[key];
console.log(`localStorage ${key}: ${value}`);
}
【讨论】：
你可以像这样获取键和值：
for (let [key, value] of Object.entries(localStorage)) {
console.log(`${key}: ${value}`);
}
【讨论】：
您可以使用Object.assign 更简单地创建对象：
// returns an object of all keys/values in localStorage
Object.assign({}, window.localStorage);
您可以阅读更多关于它的信息here at MDN。
The caniuse page 表示支持目前约占所有浏览器份额的 95%（IE 是一个奇怪的结果——真是令人惊讶）。
【讨论】：
只需在开发者控制台输入localStorage。它记录格式良好的 localStorage 键。
有时最简单的答案就是最好的答案:)
【讨论】：