获取HTML5 localStorage密钥

Sim*_*one 133 javascript html5 key local-storage

我只是想知道如何获得所有关键值localStorage.


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

for (var i=1; i <= localStorage.length; i++)  {
   alert(localStorage.getItem(i))
}
Run Code Online (Sandbox Code Playgroud)

但它只有当键是渐进数时才起作用,从1开始.


如何显示所有可用数据?

Kev*_*nis 278

for (var key in localStorage){
   console.log(key)
}
Run Code Online (Sandbox Code Playgroud)

编辑:这个答案得到了很多赞成,所以我想这是一个常见的问题.我觉得我应该对任何可能偶然发现我的答案并认为它是"正确的"的人感谢它,因为它被接受进行更新.事实是,上面的例子并不是真正做到这一点的正确方法.最好和最安全的方法是这样做:

for ( var i = 0, len = localStorage.length; i < len; ++i ) {
  console.log( localStorage.getItem( localStorage.key( i ) ) );
}
Run Code Online (Sandbox Code Playgroud)

  • 值得注意的是,现在`Object.keys(localStorage)`非常适合这种情况,只要你不需要支持IE <9. (32认同)
  • 你真的尝试过吗?`++ i`绝对*不会使循环从`i = 1`开始.括号内的第三个表达式在*每次迭代后评估*.`i ++`和`++ i`对`i`都有完全相同的效果.不同之处在于`++ i`在递增后计算为`i`的*new*值,而`i ++`在*递增之前计算为`i`*的值.它在这里完全没有区别,因为我们所关心的是增加"i"的副作用,而不是表达式的值. (8认同)
  • 关于"最佳/最安全"代码的几个问题:1)为什么要声明`localStorage.length`而不直接使用它?2)为什么在for循环中声明它?3)为什么`++ i`优于`i ++`? (2认同)
  • 另外需要注意的是,如果要显示键本身的名称,可以使用```localStorage.key(i)```部分来实现. (2认同)

Zac*_*yle 27

我想像这样创建一个容易看见的对象.

Object.keys(localStorage).reduce(function(obj, str) { 
    obj[str] = localStorage.getItem(str); 
    return obj
}, {});
Run Code Online (Sandbox Code Playgroud)

我也用饼干做类似的事情.

document.cookie.split(';').reduce(function(obj, str){ 
    var s = str.split('='); 
    obj[s[0].trim()] = s[1];
    return obj;
}, {});
Run Code Online (Sandbox Code Playgroud)

  • 我喜欢这种迭代对象的风格。 (3认同)

小智 12

function listAllItems(){  
    for (i=0; i<=localStorage.length-1; i++)  
    {  
        key = localStorage.key(i);  
        alert(localStorage.getItem(key));
    }  
}
Run Code Online (Sandbox Code Playgroud)


小智 11

在ES2017中,您可以使用:

Object.entries(localStorage)
Run Code Online (Sandbox Code Playgroud)

  • 我假设“Object.keys()”也按预期工作? (9认同)
  • 返回键和值是不正确的,这篇文章的标题是“获取 HTML5 localStorage 键”。正确的响应位于“Object.keys()”上方 (2认同)

Jef*_*ney 9

您可以使用该localStorage.key(index)函数返回字符串表示形式,其中index是您要检索的第n个对象.


小智 7

如果浏览器支持HTML5 LocalStorage,它还应该实现Array.prototype.map,启用它:

Array.apply(0, new Array(localStorage.length)).map(function (o, i) {
    return localStorage.key(i);
})
Run Code Online (Sandbox Code Playgroud)

  • 您还可以执行“new Array(this.localStorage.length).fill(0)”,这比使用 apply 感觉更简单。 (2认同)

Sea*_*mbo 6

由于问题提到了找到键,我想我会提到要显示每个键和值对,你可以这样做(基于凯文的回答):

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

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

(凯文:如果您愿意,可以随意将这些信息纳入您的答案!)


Adm*_*mir 5

您可以像这样获取键和值:

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