Obtenir les clés HTML5 localStorage

Je me demande simplement comment intégrer toutes les valeurs clés 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, afin d'afficher toutes les données disponibles?

dans ES2017, vous pouvez utiliser:

Object.entries(localStorage)

for (var key in localStorage){
   console.log(key)
}

EDIT: cette réponse reçoit beaucoup de votes positifs, donc je suppose que c'est une question courante. J'ai l'impression que je le dois à quiconque pourrait tomber 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 la bonne façon de procéder. Le moyen 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 ) ) );
}

J'aime en créer un objet facilement visible comme ça.

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

function listAllItems(){  
    for (i=0; i<=localStorage.length-1; i++)  
    {  
        key = localStorage.key(i);  
        alert(localStorage.getItem(key));
    }  
}

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

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

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

Puisque la question mentionnait la recherche des clés, j'ai pensé que je mentionnerais que pour afficher chaque paire clé et valeur, vous pourriez le faire comme ceci (en fonction 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!)

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

Vous pouvez obtenir des clés et des valeurs comme ceci:

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

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 vos utilisateurs publics voient combien de fois ils ont ajouté leurs articles dans leurs paniers, vous devez leur montrer le nombre de fois alors 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;
}

Pour ceux qui mentionnent utiliser Object.keys(localStorage)... ne le faites pas parce que cela ne fonctionnera pas dans Firefox (ironiquement parce que Firefox est fidèle à la spécification). Considère ceci:

localStorage.setItem("key", "value1")
localStorage.setItem("key2", "value2")
localStorage.setItem("getItem", "value3")
localStorage.setItem("setItem", "value4")

Parce que key, getItem et setItem sont des méthodes prototypiques Object.keys(localStorage)ne retournera que ["key2"].

Il vaut mieux faire quelque chose comme ceci:

let t = [];
for (let i = 0; i < localStorage.length; i++) {
  t.push(localStorage.key(i));
}

On peut aussi lire par le nom.

Disons que nous avons enregistré la valeur avec le nom «utilisateur» comme ceci

localStorage.setItem('user', user_Detail);

Ensuite, nous pouvons le lire en utilisant

localStorage.getItem('user');

Je l'ai utilisé et il fonctionne bien, pas besoin de faire la boucle for