Bucle a través de localStorage en HTML5 y JavaScript


92

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.


Respuestas:


143

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

¡Muchas gracias! Esto es justo lo que estaba buscando. También voy a ver el JSON que enviaste. Eso sería perfecto. Es para una aplicación iOS HTML5 sin conexión de Baby Names.
Oscar Godson

Pregunta rápida, ¿cómo agregaría a ese JSON? Como, ¿cómo agregaría "hola" después de "Dolor"?
Oscar Godson

1
te mueves, solo con mirar, debería funcionar. ¿Hay alguna razón por la que deba usar parse y no eval? Estoy usando eval ahora para obtenerlo de una cadena, pero ¿el análisis es mejor / más rápido?
Oscar Godson

1
@Oscar, parsees más seguro porque te protege de la ejecución de código. Y, a menudo, también es mucho más rápido. Ver blog.mozilla.com/webdev/2009/02/12/native-json-in-firefox-31
Matthew Flaschen

1
@BBagi, devuelve cualquiera que sea la entrada, decodificada. El nivel superior de un texto JSON puede ser un objeto o una matriz. PruebaJSON.parse('["Lorem", "Ipsum", "Dolor"]').length
Matthew Flaschen

32

La forma más sencilla es:

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

24

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


2
Esto solo funciona si está utilizando jQuery. $se usa para otras bibliotecas y también se usa a menudo como un alias para document.querySelectorAll. La pregunta tampoco está etiquetada como una pregunta [jquery].
AnnanFay

9

Esto me funciona en Chrome:

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

1
¿Qué parte exactamente? Este fragmento usa jQuery según la pregunta original. ¿Puedes probar esto en la consola chrome js? for(var key in localStorage) { console.log(localStorage.getItem(key)); }
jtblin

@jtblin Lo acabo de probar, regresó TypeError: Cannot call method 'toString' of null, así que supongo que la 'clave' está regresando nula
Juan Carlos Alpizar Chinchilla

1
Esto funciona en versiones recientes de Chrome, Safari y Firefox
mndrix

1
@JuanCarlosAlpizarChinchilla no hay 'toString' en el código así que ¯_ (ツ) _ / ¯. Como se señaló en el comentario anterior, funciona bien en todos los navegadores recientes.
jtblin

@jtblin mi comentario tiene dos años, así que ¯_ (ツ) _ / ¯ gracias por la cabeza arriba
Juan Carlos Alpizar Chinchilla

1

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.


1

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.


¿Podría dar un ejemplo de cómo una de estas respuestas no funcionaría en un navegador? Esto fue hace mucho tiempo, pero no recuerdo haber tenido ningún problema al recorrer estas respuestas
Oscar Godson

Tenía la intención de que mi comentario se agregara a la transmisión general, no a esta publicación en particular, y puede haber sido un poco duro. Estaba frustrado en ese momento tratando de encontrar una solución para varios navegadores. El ejemplo de Steve Isenberg (abajo) que contiene for (clave var en localStorage) {typeofKey = (typeof localStorage [key]); console.log (clave, typeofKey); } No funciona en implementaciones de webKit (¡pruébalo!)
StarTraX

Esto funciona: para (var i = 0; i <localStorage.length; ++ i) {console.log (localStorage.key (i) + ":" + localStorage.getItem (localStorage.key (i))); }
StarTraX

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.