web-dev-qa-db-fra.com

Obtenir les clés de stockage local HTML5

Je me demande simplement comment obtenir toutes les valeurs clés dans localStorage.

J'ai essayé de récupérer les valeurs avec une simple boucle JavaScript

for (var i=1; i <= localStorage.length; i++)  {
   alert(localStorage.getItem(i))
}

Mais cela ne fonctionne que si les touches sont des nombres progressifs, commençant à 1.

Comment obtenir toutes les clés pour afficher toutes les données disponibles?

javascripthtml5keylocal-storage
132
Simone

dans ES2017, vous pouvez utiliser:

Object.entries(localStorage)
4
nktshn
for (var key in localStorage){
   console.log(key)
}

EDIT: cette réponse reçoit de nombreux votes positifs, alors je suppose que c’est une question courante. Je sens que je le dois à tous ceux qui pourraient trébucher sur ma réponse et penser que c'est "juste" simplement parce qu'il a été accepté de faire une mise à jour. La vérité est que l’exemple ci-dessus n’est pas vraiment le moyen à droite de le faire. Le meilleur et le plus sûr est de le faire comme ceci:

for ( var i = 0, len = localStorage.length; i < len; ++i ) {
  console.log( localStorage.getItem( localStorage.key( i ) ) );
}
276
Kevin Ennis

J'aime créer un objet facilement visible comme celui-ci.

Object.keys(localStorage).reduce(function(obj, str) { 
    obj[str] = localStorage.getItem(str); 
    return obj
}, {});

Je fais la même chose avec les cookies.

document.cookie.split(';').reduce(function(obj, str){ 
    var s = str.split('='); 
    obj[s[0].trim()] = s[1];
    return obj;
}, {});
26
Zack Argyle
function listAllItems(){  
    for (i=0; i<=localStorage.length-1; i++)  
    {  
        key = localStorage.key(i);  
        alert(localStorage.getItem(key));
    }  
}
12
nerdcoder

Vous pouvez utiliser la fonction localStorage.key(index) pour renvoyer la représentation sous forme de chaîne, où index est le nième objet à récupérer.

8
Jeffrey Sweeney

Si le navigateur prend en charge HTML5 LocalStorage, il doit également implémenter Array.prototype.map, ce qui permet:

Array.apply(0, new Array(localStorage.length)).map(function (o, i) {
    return localStorage.key(i);
})
7
cillay

Puisque la question mentionnait la recherche des clés, je pensais mentionner que pour montrer chaque paire de clés et de valeurs, vous pouviez le faire comme ceci (sur la base de la réponse de Kevin):

for ( var i = 0, len = localStorage.length; i < len; ++i ) {
  console.log( localStorage.key( i ) + ": " + localStorage.getItem( localStorage.key( i ) ) );
}

Cela enregistrera les données au format "clé: valeur"

(Kevin: n'hésitez pas à prendre cette information dans votre réponse si vous le souhaitez!)

4
Sean Colombo

Je suis d’accord avec Kevin, il a la meilleure réponse, mais parfois, lorsque vous avez différentes clés dans votre stockage local avec les mêmes valeurs, par exemple, vous voulez que les utilisateurs publics voient le nombre de fois où ils ont ajouté leurs éléments à leurs paniers. nombre de fois aussi bien que vous pouvez utiliser ceci:

var set = localStorage.setItem('key', 'value');
var element = document.getElementById('tagId');

for ( var i = 0, len = localStorage.length; i < len; ++i ) {
  element.innerHTML =  localStorage.getItem(localStorage.key(i)) + localStorage.key(i).length;
}
0
Hassan Azimi

Ceci imprimera toutes les clés et valeurs sur localStorage:

ES6:

for (let i=0; i< localStorage.length; i++) {
    let key = localStorage.key(i);
    let value = localStorage[key];
    console.log(`localStorage ${key}:  ${value}`);
}
0
Rahim Naik