web-dev-qa-db-fra.com

Comment récupérer tous les éléments localStorage sans connaître les clés à l'avance?

Je veux montrer toutes les clés et le stockage écrits auparavant. Mon code est ci-dessous. J'ai créé une fonction (allStorage) mais cela ne fonctionne pas. Comment puis-je faire ceci?

    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));
        }
    }
javascriptlocal-storage
30
user1942359

Si vous modifiez votre fonction en ceci, vous pouvez lister tous les éléments en fonction de la clé (listera uniquement les éléments):

function allStorage() {

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

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

    return values;
}

Object.keys est un nouvel ajout à JavaScript (ECMAScript 5). Il répertorie toutes les clés propres d'un objet, ce qui est plus rapide que l'utilisation d'une boucle for-in qui est l'option pour cela.

Cependant, cela ne montrera pas les clés. Pour cela, vous devez renvoyer un objet au lieu d'un tableau (ce qui est plutôt IMO sans point car cela vous amènera autant que vous l'étiez auparavant avec localStorage juste avec un objet différent - mais par exemple pour l'amour):

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

Si vous voulez une liste de format compact, faites-le à la place - ici chaque élément du tableau aura key=item que vous pourrez ensuite diviser en paires et ainsi de suite:

function allStorage() {

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

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

    return archive;
}
45
user1693593

La manière la plus simple dans ES2015 + est:

const items = {...localStorage};
23
Alexey Prokhorov

localStorage n'est pas un tableau, mais un objet, alors essayez qc. comme ça:

for (var a in localStorage) {
   console.log(a, ' = ', localStorage[a]);
}
13
tborychowski
// 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);  

}
4
JD May

La manière la plus simple

return JSON.stringify (localStorage);

3
Grumpy

Un peu plus succinct:

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