如何在事先不知道密钥的情况下检索所有 localStorage 项目？

IT技术 javascript local-storage
2021-03-11 19:33:40

我想显示之前编写的所有密钥和存储。我的代码如下。我创建了一个函数 (allStorage) 但它不起作用。我怎样才能做到这一点？

    function storeUserScribble(id) {
        var scribble = document.getElementById('scribble').innerHTML;
        localStorage.setItem('userScribble',scribble);
    }

    function getUserScribble() {
        if ( localStorage.getItem('userScribble')) {
            var scribble = localStorage.getItem('userScribble');
        }
        else {
            var scribble = 'You can scribble directly on this sticky... and I will also remember your message the next time you visit my blog!';
        }
        document.getElementById('scribble').innerHTML = scribble;
    }

    function clearLocal() {
        localStorage.clear();
        return false;
    }

    function allStorage() {
        var archive = [];
        for (var i = 0; i<localStorage.length; i++) {
            archive[i] = localStorage.getItem(localStorage.key(i));
        }
    }
6个回答

如果您将函数修改为此，您可以根据键列出所有项目（将仅列出项目）：

function allStorage() {

    var values = [],
        keys = Object.keys(localStorage),
        i = keys.length;

    while ( i-- ) {
        values.push( localStorage.getItem(keys[i]) );
    }

    return values;
}

Object.keys是 JavaScript (ECMAScript 5) 的新增功能。它列出了一个对象上的所有自己的键，这比使用 for-in 循环更快，这是一个选项。

但是，这不会显示密钥。为此，您需要返回一个对象而不是数组（这是毫无意义的 IMO，因为这将使您像以前使用 localStorage 时使用不同的对象一样 - 但例如）：

function allStorage() {

    var archive = {}, // Notice change here
        keys = Object.keys(localStorage),
        i = keys.length;

    while ( i-- ) {
        archive[ keys[i] ] = localStorage.getItem( keys[i] );
    }

    return archive;
}

如果您想要一个紧凑的格式列表，那么请改为执行此操作 - 此处数组中的每个项目都将拥有key=item，您稍后可以将其分成对等：

function allStorage() {

    var archive = [],
        keys = Object.keys(localStorage),
        i = 0, key;

    for (; key = keys[i]; i++) {
        archive.push( key + '=' + localStorage.getItem(key));
    }

    return archive;
}
正是我需要的，我试图用数组来制作它，但它没有用，当我将它更改为与我一起使用的对象时，也感谢您的描述:)
2021-04-30 19:33:40
不错，不知道Object.keys，+1
2021-05-11 19:33:40

ES2015+ 中最简单的方法是：

const items = { ...localStorage };
有趣的是，这是我见过的最冗余的代码。和只写 localStorage 一样。localStorage -> {...localStorage}
2021-04-25 19:33:40
整洁但不回答问题。你只是得到一个新对象。
2021-04-26 19:33:40
@Kzqai 它只返回可枚举的属性，因此不需要额外的 hasOwnProperty 检查。
2021-04-30 19:33:40
这不会遇到 hasOwnProperty 问题吗？
2021-05-01 19:33:40
这是什么伏都教？传播语法？
2021-05-03 19:33:40

localStorage不是一个数组，而是一个对象，所以试试…… 像这样：

for (var a in localStorage) {
   console.log(a, ' = ', localStorage[a]);
}
这也将列出功能。
2021-05-06 19:33:40
我想你需要使用 localStorage.hasOwnProperty(a) 来让它不列出函数
2021-05-06 19:33:40
奇怪... 似乎只是 Firefox 中的一个问题。
2021-05-11 19:33:40
@Nux 不适合我
2021-05-19 19:33:40

最简单的方法是使用：

return JSON.stringify(localStorage);

// iterate localStorage
for (var i = 0; i < localStorage.length; i++) {

  // set iteration key name
  var key = localStorage.key(i);

  // use key name to retrieve the corresponding value
  var value = localStorage.getItem(key);

  // console.log the iteration key and value
  console.log('Key: ' + key + ', Value: ' + value);  

}
其它你可能感兴趣的问题
上一篇为什么 ("foo" === new String("foo")) 在 JavaScript 中求值为 false？ 下一篇每次测试的 Jest Mock module