获取HTML5 localStorage密钥


145

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


我试图用一个简单的JavaScript循环来检索值

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

但是仅当键是从1开始的渐进数字时,它才有效。


如何显示所有键,以显示所有可用数据?




为什么此循环以i = 1开始并以i = localStorage.length结束?在我测试过的浏览器(Chrome)中,循环应从0开始,并在localStorage.length-1 ...结束
Louis LC

@LouisLC,因为我为键使用了渐进式数字(例如关系数据库中的主键)。
西蒙妮2014年

Answers:


35

在ES2017中,您可以使用:

Object.entries(localStorage)

5
而且我认为Object.keys()作品也可以预期吗?

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

在此链接中…… stackoverflow.com/ questions/15313606/……为什么他们使用所有这些奇怪的方法来访问localStorage?

2
“最佳/最安全”代码的几个问题:1)为什么要声明localStorage.length而不直接使用它?2)为什么在for循环中声明它?3)为什么++i优先于i++
Luciano Bargmann 2014年

8
您实际上尝试过吗?++i绝对不会使循环从处开始i = 1。每次迭代都会对括号内的第三个表达式求值。i++++i都对完全相同的效果i。不同之处在于,++i对递增后的值求值i,而i++对递增i 的值求值。这里绝对没有区别,因为我们关心的只是增加的副作用i,而不是表达式的值。
凯文·恩尼斯

33
值得注意的是,如今Object.keys(localStorage),只要您不需要支持IE <9,就可以很好地解决此问题
Adrian

2
还需要注意的是,如果要显示键本身的名称,则可以使用localStorage.key( i )零件来完成。
肖恩·科伦坡

30

我喜欢这样创建一个容易看到的对象。

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

1
我喜欢这种遍历对象的风格。
乔纳森·斯特尔瓦格

12
function listAllItems(){  
    for (i=0; i<=localStorage.length-1; i++)  
    {  
        key = localStorage.key(i);  
        alert(localStorage.getItem(key));
    }  
}


7

如果浏览器支持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少一些。
莱尼

6

既然问题提到要找到键,我想我要提到要显示每个键和值对,您可以这样做(根据Kevin的回答):

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

这将以“键:值”格式记录数据

(凯文:如果需要,可以随时将此信息添加到您的答案中!)


1

这将在localStorage上打印所有键和值:

ES6:

for (let i=0; i< localStorage.length; i++) {
    let key = localStorage.key(i);
    let value = localStorage[key];
    console.log(`localStorage ${key}:  ${value}`);
}

1

您可以这样获得键和值:

for (let [key, value] of Object.entries(localStorage)) {
  console.log(`${key}: ${value}`);
}

0

我同意凯文(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;
}

-1

对于那些使用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));
}

@Darkrum因为Firefox正确地遵循了规范,所以如果您使用,key,getItem和setItem将会丢失object.keys()……我将更新我的回答以反映这一点。
Mike Ratcliffe

只需阅读本地存储的规范,我看不到您提到的内容。
Darkrum '18 -4-20

并阅读object.keys()的规范,如果您说的是真的,那么Firefox就是您的不二之选。
Darkrum '18 -4-20

@Darkrum查看html.spec.whatwg.org/multipage/…,您可以看到该规范使用定义了IDL [Exposed=Window]。这导致了我描述的行为。如果指定[Exposed=Window,OverrideBuiltins]它,它将提供我们期望的行为,但规范指定OverrideBuiltins。您可以在whatwg / html中查看有关此内容的讨论:github.com/whatwg/html/issues/183
Mike Ratcliffe

再次说明,这与object.keys的工作方式无关。Mozillas不允许设置的选择是他们如何解释规范。显然,Google知道自己在做什么,因为除非通过其他方式专门进行更改,否则无法更改的原型与自己的属性有任何关系。
Darkrum '18 -4-27

-3

我们也可以按名称阅读。

假设我们这样保存了名为“用户”的值

localStorage.setItem('user', user_Detail);

然后我们可以通过使用

localStorage.getItem('user');

我用它,它工作顺利,不需要做for循环

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.