获取 HTML5 localStorage 密钥

我只是想知道如何获取 localStorage中的所有键值。

我尝试用一个简单的 JavaScript 循环检索这些值

for (var i=1; i <= localStorage.length; i++)  {
alert(localStorage.getItem(i))
}

但是只有当键是从1开始的渐进数字时，它才能工作。

为了显示所有可用的数据，我如何获得所有的键？

173410 次浏览
小开

可以使用 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 ) ) );
}
小开 
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);
})
小开

我同意 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
}, {});

我对饼干也是这么做的。

document.cookie.split(';').reduce(function(obj, str){
var s = str.split('=');
obj[s[0].trim()] = s[1];
return obj;
}, {});
小开

既然问题提到了找到键，我想我应该提到，为了显示每个键和值对，你可以这样做(基于 Kevin 的回答) :

for ( var i = 0, len = localStorage.length; i < len; ++i ) {
console.log( localStorage.key( i ) + ": " + localStorage.getItem( localStorage.key( i ) ) );
}

这将以“ key: value”格式记录数据

(凯文: 如果你愿意，可以把这些信息写进你的答案里!)

小开

对于那些提到使用 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));
}
小开
最佳答案

在 ES2017中，你可以使用:

Object.entries(localStorage)
小开

这将打印 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);

你可以阅读更多关于它的资料。

Caniuse 页面 显示，目前浏览器共享的支持率约为95% (IE 是个例外——真令人惊讶)。

小开

只要在开发者控制台输入 localStorage，就可以很好地格式化本地存储键。 有时候最简单的答案就是最好的答案:)

小开

对于任何寻找 jQuery 解决方案的人，这里有一个快速示例。

$.each(localStorage, function(key, str){
console.log(key + ": " + str);
});
小开

任何人搜索这个试图找到本地存储密钥..。

答案很简单:

Object.keys(localStorage);

提交答案