Как получить все элементы localStorage, не зная заранее ключей?

Я хочу показать все ключи и хранилище, написанные ранее. Мой код ниже. Я создал функцию (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));
        }
    }

Ответы

Ответ 1

Если вы измените свою функцию на это, вы можете перечислить все элементы на основе ключа (будут перечислены только элементы):

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

Ответ 2

localStorage не является массивом, а объектом, поэтому попробуйте sth. например:

for (var a in localStorage) {
   console.log(a, ' = ', localStorage[a]);
}

Ответ 3

Самый простой способ в ES2015+:

const items = {...localStorage};

Ответ 4

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

}

Ответ 5

Немного более кратко:

function getAllLocalStorage() {
    return Object.keys(localStorage)
        .reduce((obj, k) => {
            return { ...obj, [k]: localStorage.getItem(k)}}, {});
        }

Ответ 6

Самый простой способ

return JSON.stringify(localStorage);