Búsqueda de sitios web

html - Iterando 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 hago un localStorage.length devuelve 3, lo cual es correcto. Así que asumiría que un bucle for...in funcionaría.

Estaba pensando en algo como:

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

Pero no sirve de nada. ¿Alguna idea?

La otra idea que tuve fue algo así como

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

En el que el for...in funciona.

Respuesta #1

Puedes usar el método key. localStorage.key(index) devuelve la key enésima (index) (el orden está definido por la implementación pero es constante hasta que añadas o elimines claves).

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

Si el orden importa, podrías almacenar un array serializado en JSON:

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

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

EDITAR: Para cargar el arreglo, agregarle elementos y luego almacenarlo:

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

Respuesta #2

La manera más sencilla es:

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

Respuesta #3

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

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

  // key magic
  // value magic

});

Eventualmente, obtén el objeto con:

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

Respuesta #4

for (const [key, value] of Object.entries(localStorage)) {
   console.log(key, value);
}

Aquí estamos recorriendo cada clave y valor respectivamente en el almacenamiento local.

Artículos relacionados