获取 HTML5 本地存储密钥

Posted 2023-02-14

【中文标题】获取 HTML5 本地存储密钥

【英文标题】：Get HTML5 localStorage keys

【发布时间】：2012-01-15 04:51:53

【问题描述】：

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

---

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

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

但只有当键是渐进数字时才有效，从 1 开始。

---

我如何获取所有键，以便显示所有可用数据？

【问题讨论】：

How can I show all the localStorage saved varliables? 的可能重复项

***.com/questions/3138564/…的可能重复

为什么这个循环以 i = 1 开始并以 i = localStorage.length 结束？在我测试过的浏览器（Chrome）中，循环应该从 0 开始并在 localStorage.length - 1 结束...

@LouisLC 因为我使用渐进式数字作为我的键（就像关系数据库中的主键）。

【参考方案1】：

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

【参考方案2】：

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

【讨论】：

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

关于“最佳/最安全”代码的几个问题： 1) 为什么声明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 ) 部分来实现。

【参考方案3】：

function listAllItems()  
    for (i=0; i<localStorage.length; i++)  
      
        key = localStorage.key(i);  
        alert(localStorage.getItem(key));
      

【参考方案4】：

如果浏览器支持 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。

【参考方案5】：

我同意 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;

【参考方案6】：

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

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

【讨论】：

我喜欢这种迭代对象的风格。

【参考方案7】：

由于问题提到了查找键，我想我会提到要显示每个键和值对，你可以这样做（基于凯文的回答）：

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

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

（Kevin：如果您愿意，请随时将此信息纳入您的答案！）

【参考方案8】：

对于那些提到使用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 正确地遵循规范，如果您使用 object.keys()，key、getItem 和 setItem 将丢失...我将更新我的答案以反映这一点。

只阅读本地存储的规范，我没有看到你提到的内容。

@Darkrum 查看html.spec.whatwg.org/multipage/…，您可以看到规范使用[Exposed=Window] 定义了IDL。这导致了我描述的行为。如果它是用[Exposed=Window,OverrideBuiltins] 指定的，它会给出我们期望的行为，但规范没有指定OverrideBuiltins。你可以在 whatwg/html 中看到关于它的讨论：github.com/whatwg/html/issues/183

再次声明，这与 object.keys 的工作方式无关。 Mozilla 选择不允许设置它们是他们解释规范的方式。显然，Google 知道自己在做什么，因为除非通过其他方式特别更改否则无法更改的原型与自己的属性有什么关系。

【参考方案9】：

在 ES2017 中你可以使用：

Object.entries(localStorage)

【讨论】：

我认为Object.keys() 也能按预期工作？

返回键和值是不正确的，这篇文章的标题是“Get HTML5 localStorage keys”。正确的响应在Object.keys()

之上

【参考方案10】：

这将打印 localStorage 上的所有键和值：

ES6：

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

【参考方案11】：

你可以像这样获取键和值：

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

【参考方案12】：

您可以使用Object.assign 更简单地创建对象：

// returns an object of all keys/values in localStorage
Object.assign(, window.localStorage);

您可以阅读更多关于它的信息here at MDN。

The caniuse page 表示支持目前约占所有浏览器份额的 95%（IE 是一个奇怪的结果——真是令人惊讶）。

【参考方案13】：

只需在开发者控制台输入localStorage。它记录格式良好的 localStorage 键。 有时最简单的答案就是最好的答案:)