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

use*_*359 39 javascript local-storage

我想显示之前写的所有密钥和存储.我的代码如下.我创建了一个函数(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));
        }
    }
Run Code Online (Sandbox Code Playgroud)

小智 52

如果您将功能修改为此功能,则可以根据键列出所有项目(仅列出项目):

function allStorage() {

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

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

    return values;
}
Run Code Online (Sandbox Code Playgroud)

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;
}
Run Code Online (Sandbox Code Playgroud)

如果你想要一个紧凑的格式列表,那么这样做 - 这里的数组中的每个项目都有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;
}
Run Code Online (Sandbox Code Playgroud)

  • 很好,不知道`Object.keys`,+ 1 (3认同)

Ale*_*rov 40

ES2015 +中最简单的方法是:

const items = {...localStorage};
Run Code Online (Sandbox Code Playgroud)

  • 这是什么voodo?[传播语法?](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) (10认同)
  • 有趣的是,这是我见过的最冗余的代码。这和只写localStorage是一样的。**本地存储** -&gt; **{...本地存储}** (5认同)
  • @atilkan你错了:`localStorage`将返回`Storage`对象的实例;而 `{...localStorage}` - 一个简单的对象 (3认同)
  • 整洁,但没有回答问题。你只是得到一个新对象。 (2认同)
  • @AspiringDev 您将获得一个新对象,其中包含所有键值,而无需提前知道它们。这不是问题所问的吗? (2认同)

Gru*_*mpy 16

最简单的方法是使用:

return JSON.stringify(localStorage);
Run Code Online (Sandbox Code Playgroud)


Dzi*_*owy 14

localStorage不是一个数组,而是一个对象,所以试试吧.像这样:

for (var a in localStorage) {
   console.log(a, ' = ', localStorage[a]);
}
Run Code Online (Sandbox Code Playgroud)

  • 我猜你需要使用localStorage.hasOwnProperty(a)才能列出函数 (5认同)

小智 7

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


小智 5

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

}
Run Code Online (Sandbox Code Playgroud)