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

Question

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

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

Answer 1

Si vous modifiez votre fonction de cette manière, vous pouvez lister tous les éléments en fonction de la clé (vous ne listerez que 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 liste toutes les clés propres à un objet, ce qui est plus rapide que l'utilisation d'une boucle for-in, qui est l'option pour cela.

Cependant, cela n'affichera pas les clés. Pour cela, vous devez renvoyer un objet au lieu d'un tableau (ce qui est plutôt inutile selon l'OMI car cela vous amènera aussi loin que vous l'étiez auparavant avec localStorage, mais avec un objet différent - mais pour l'exemple) :

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 au format compact, faites ceci à 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;
}

Answer 2

La méthode la plus simple dans ES2015+ est la suivante :

const items = { ...localStorage };

Answer 3

localStorage n'est pas un tableau, mais un objet, alors essayez quelque chose comme ceci :

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

Answer 4

Le moyen le plus simple serait d'utiliser :

return JSON.stringify(localStorage);

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

}