获取HTML5 localStorage密钥

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

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

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

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

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

在ES2017中，您可以使用：

Object.entries(localStorage)

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

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

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

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

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

如果浏览器支持HTML5 LocalStorage，则它还应该实现Array.prototype.map，启用此功能：

Array.apply(0, new Array(localStorage.length)).map(function (o, i) {
    return localStorage.key(i);
})

既然问题提到要找到键，我想我要提到要显示每个键和值对，您可以这样做（根据Kevin的回答）：

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

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

（凯文：如果需要，可以随时将此信息添加到您的答案中！）

您可以这样获得键和值：

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

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

ES6：

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

我同意凯文（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)...的人，不要因为它在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));
}

We can also read by the name.

Say we have saved the value with name 'user' like this

localStorage.setItem('user', user_Detail);

Then we can read it by using

localStorage.getItem('user');

I used it and it is working smooth, no need to do the for loop

本文地址：http://javascript.askforanswer.com/huoquhtml5-localstoragemiyao.html
文章标签：html , javascript , key , local-storage
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！

文件下载