Obtenir les clés HTML5 localStorage


145

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?




Pourquoi cette boucle commence-t-elle par i = 1 et se termine par i = localStorage.length? Dans les navigateurs que j'ai testés (Chrome), la boucle devrait commencer à 0 et se terminer à localStorage.length - 1 ...
Louis LC

@LouisLC parce que j'utilisais des nombres progressifs pour mes clés (comme une clé primaire dans une base de données relationnelle).
Simone

Réponses:


35

dans ES2017, vous pouvez utiliser:

Object.entries(localStorage)

5
et je suppose que Object.keys()fonctionne comme prévu aussi?

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

Dans ce lien .... stackoverflow.com/questions/15313606/… ... pourquoi utilisent-ils toutes ces méthodes étranges pour accéder à localStorage?

2
Plusieurs questions pour le code "meilleur / plus sûr": 1) Pourquoi le déclarer localStorage.lengthet ne pas l'utiliser directement? 2) Pourquoi le déclarer dans la boucle for? 3) Pourquoi ++iest-il préféré i++?
Luciano Bargmann

8
L'avez-vous réellement essayé? ++ine fait certainement pas démarrer la boucle à i = 1. La troisième expression entre parenthèses est évaluée après chaque itération. i++et les ++ideux ont exactement le même effet sur i. La différence est que ++is'évalue à la nouvelle valeur de iaprès l'incrémentation, alors que i++s'évalue à la valeur de i avant l' incrémentation. Cela ne fait absolument aucune différence ici, car tout ce qui nous importe, c'est l'effet secondaire de l'incrémentation i, pas la valeur de l'expression.
Kevin Ennis

33
Il convient de noter que de nos jours Object.keys(localStorage)fonctionne parfaitement bien pour ce scénario, tant que vous n'avez pas besoin de prendre en charge IE <9.
Adrian

2
Il est également utile de noter que si vous souhaitez afficher le nom de la clé elle-même, vous pouvez le faire avec la localStorage.key( i )partie.
Sean Colombo

30

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

1
J'aime ce style d'itération sur des objets.
Jonathan Stellwag

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

9

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.


7

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

Vous pouvez également faire new Array(this.localStorage.length).fill(0)ce qui est un peu moins piraté que d'utiliser apply imo.
Lenny

6

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!)


1

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

1

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

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

0

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

-1

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

@Darkrum Parce que Firefox suit correctement les spécifications, key, getItem et setItem seraient manquants si vous utilisez object.keys()... Je mettrai à jour ma réponse pour refléter cela.
Mike Ratcliffe

Lisez simplement les spécifications pour le stockage local et je ne vois pas ce que vous avez mentionné.
Darkrum

Et lisez la spécification pour object.keys () ressemble à Firefox est ce qui n'est pas en jachère si ce que vous dites est vrai.
Darkrum

@Darkrum Regardez html.spec.whatwg.org/multipage/… et vous pouvez voir que la spécification définit l'IDL avec [Exposed=Window]. Cela se traduit par le comportement que je décris. Si elle était spécifiée avec [Exposed=Window,OverrideBuiltins]elle donnerait le comportement attendu, mais la spécification ne le spécifie pasOverrideBuiltins . Vous pouvez voir une discussion à ce sujet dans whatwg / html ici: github.com/whatwg/html/issues/183
Mike Ratcliffe

Encore une fois, comme je vais le dire, cela n'a rien à voir avec le fonctionnement de object.keys. Le choix de Mozillas de ne pas les autoriser à être définis est la façon dont ils ont interprété la spécification. Il est clair que Google savait ce qu'il faisait, car qu'est-ce qu'un prototype qui ne peut pas être modifié à moins de le faire spécifiquement par d'autres moyens a quelque chose à voir avec ses propres propriétés.
Darkrum

-3

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.