Bucle a través de localStorage en HTML5 y JavaScript

Entonces, estaba pensando que podría recorrer localStorage como un objeto normal ya que tiene una longitud. ¿Cómo puedo recorrer esto?

localStorage.setItem(1,'Lorem');
localStorage.setItem(2,'Ipsum');
localStorage.setItem(3,'Dolor');

Si lo hago localStorage.length, devuelve lo 3que es correcto. Entonces supongo que un for...inbucle funcionaría.

Estaba pensando en algo como:

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

Pero fue en vano. ¿Algunas ideas?

La otra idea que tuve fue algo como

localStorage.setItem(1,'Lorem|Ipsum|Dolor')
var split_list = localStorage.getItem(1).split('|');

En el for...inque funciona.

Puedes usar el keymétodo. localStorage.key(index)devuelve la indexclave th (el orden está definido por la implementación pero es constante hasta que agrega o elimina claves).

for (var i = 0; i < localStorage.length; i++){
    $('body').append(localStorage.getItem(localStorage.key(i)));
}

Si el pedido es importante, puede almacenar una matriz serializada JSON:

localStorage.setItem("words", JSON.stringify(["Lorem", "Ipsum", "Dolor"]));

El borrador de la especificación afirma que cualquier objeto que admita la clonación estructurada puede ser un valor. Pero esto todavía no parece ser compatible.

EDITAR: Para cargar la matriz, agréguela y luego almacene:

var words = JSON.parse(localStorage.getItem("words"));
words.push("hello");
localStorage.setItem("words", JSON.stringify(words));

La forma más sencilla es:

Object.keys(localStorage).forEach(function(key){
   console.log(localStorage.getItem(key));
});

Además de todas las otras respuestas, puede usar $ .each función de la biblioteca jQuery:

$.each(localStorage, function(key, value){

  // key magic
  // value magic

});

Finalmente, obtenga el objeto con:

JSON .parse (localStorage.getItem (localStorage.key (clave)));

Esto me funciona en Chrome:

for(var key in localStorage) {
  $('body').append(localStorage.getItem(key));
}

Sobre la base de la respuesta anterior, aquí hay una función que recorrerá el almacenamiento local por clave sin conocer los valores de clave.

function showItemsByKey() {
   var typeofKey = null;
   for (var key in localStorage) {
       typeofKey = (typeof localStorage[key]);
       console.log(key, typeofKey);
   }
}

Si examina la salida de la consola, verá que todos los elementos agregados por su código tienen un tipo de cadena. Mientras que los elementos integrados son funciones {[código nativo]} o, en el caso de la propiedad de longitud, un número. Puede usar la variable typeofKey para filtrar solo en las cadenas de modo que solo se muestren sus elementos.

Tenga en cuenta que esto funciona incluso si almacena un número o booleano como valor, ya que ambos se almacenan como cadenas.

Todas estas respuestas ignoran las diferencias entre las implementaciones de localStorage en los navegadores. Los colaboradores en este dominio deben calificar en gran medida sus respuestas con las plataformas que describen. Una implementación para todo el navegador está documentada en https://developer.mozilla.org/en/docs/Web/API/Window/localStorage y, aunque es muy potente, solo contiene algunos métodos básicos. Recorrer los contenidos requiere una comprensión de la implementación específica de los navegadores individuales.

localStoragees un Object.

Podemos recorrerlo con JavaScript for / in Statement como cualquier otro objeto.

Y usaremos .getItem()para acceder al valor de cada tecla (x).

for (x in localStorage){
    console.log(localStorage.getItem(x));
}