Comment puis-je obtenir une liste des éléments stockés dans html 5 de stockage local à partir de javascript?

Comment puis-je obtenir une liste des éléments stockés dans html 5 de stockage local à partir de javascript?

  • dire quoi? dans un cookie?
InformationsquelleAutor Kyle | 2011-03-23
  1. 56

    De HTML5 référence:

    Comme les autres objets JavaScript, vous
    peut traiter l'objet localStorage
    un tableau associatif. Au lieu d'utiliser
    le getItem() et setItem() les méthodes, les
    vous pouvez simplement utiliser les crochets.

    localStorage.setItem('test', 'testing 1');
localStorage.setItem('test2', 'testing 2');
localStorage.setItem('test3', 'testing 3');

for(var i in localStorage)
{
    console.log(localStorage[i]);
}

//test for firefox 3.6 see if it works
//with this way of iterating it
for(var i=0, len=localStorage.length; i<len; i++) {
    var key = localStorage.key(i);
    var value = localStorage[key];
    console.log(key + " => " + value);
}

    Ce sera de sortie: 

    testing 3
testing 2
testing 1

test3 => testing 3
test2 => testing 2
test => testing 1

    Ici est la JSFiddle Démo

    • A travaillé pour moi dans chrome, mais firefox 3.6 a jeté l'erreur "TypeError: null est non valide iterator valeur null"
    • il fonctionne très bien dans firefox 4. il est sorti hier, permettez-moi de vérifier 3.6
    • Même si Firefox supporte localStorage, il peut être désactivée. Vérifiez qu'il est allumé. Aller à about:config " et vérifier que les dom.le stockage.activé est définie sur true.
    • oui il est activé. Et quand faire console.debug(localStorage), je peux voir le test des variables dans elle.
    • pouvez-vous courir le jsfiddle démo pour voir si vous recevez le même message d'erreur?
    • essayez la mise à jour de la réponse de voir si cela fonctionne en 3.6
    • la nouvelle version fonctionne 🙂
    • étrange. je suppose 3.6 ne prend pas en charge la première façon
    • Être au courant de la première option sera également en boucle sur toutes les propriétés, et pas seulement les clés que vous avez ajouté. J'ai modifié la première boucle trop console.log('key', i, 'val', localStorage[i]) et a obtenu : "key" "test" "val" "testing 1" "key" "test3" "val" "testing 3" "key" "test2" "val" "testing 2" "key" "key" "val" function () "key" "getItem" "val" function () "key" "setItem" "val" function () "key" "removeItem" "val" function () "key" "clear" "val" function () "key" "length" "val" 3

    InformationsquelleAutor KJYe.Name 葉家仁
  2. 25

    localStorage est fait référence à l'objet window.De stockage, de sorte que u peut l'utiliser comme chaque autre objet:

    Obtenir tableau d'éléments

    Object.keys(localStorage)

    Obtenir la longueur

    Object.keys(localStorage).length

    Itérer avec jquery

    $.each(localStorage, function(key, value){
   .....
})
    • jQuery?! Facepalm. Object.keys(localStorage).forEach(key => console.log(localStorage[key]));
    • Est-il un moyen d'obtenir des entrées pour tous les domaines, au lieu de celui dans l'onglet en cours?
    InformationsquelleAutor Richard Hutta
  3. 3

    vous pouvez utiliser Object.assign():

    var data = Object.assign({}, localStorage)
    • Génial solution avec le moins de trucs
    InformationsquelleAutor Yukulélé
  4. 1

    Depuis localStorage est la clé-valeur, avec des cordes, juste sérialiser avec JSON, et désérialiser lorsque vous souhaitez récupérer.

     localStorage.setItem("bar", JSON.stringify([1,2,3]));
 var foo = localStorage.getItem("bar");
 JSON.parse(foo);
 //returns [1,2,3]
    InformationsquelleAutor Mike Lewis
  5. 0

    Ce sujet: 

    Object.keys(localStorage).map(k => localStorage.getItem(k))
    InformationsquelleAutor Pavel Durov