Looping a través de localStorage en HTML5 y JavaScript

Question

Por lo tanto, 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 vuelve 3 que es correcto. Así que supongo que un bucle for...in funcionaría.

que estaba pensando algo como:

for (x in localStorage){ 
    $('body').append(localStorage[x]); 
} 

Pero fue en vano. ¿Algunas ideas?

La otra idea que tenía era algo así como

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

En el que el for...in funciona.

Answer 1

Puede usar el método key. localStorage.key(index) devuelve la clave index th (el orden es definido por la implementación pero constante hasta que agregue o elimine claves).

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

Si las cuestiones de orden, se puede almacenar una matriz JSON-serializado:

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

El proyecto de especificación afirma que cualquier objeto que admite structured clone puede ser un valor. Pero esto no parece ser compatible todavía.

EDIT: Para cargar la matriz, agregar a ella, entonces la tienda:

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

Answer 2

Esto funciona para mí en Chrome:

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

Answer 3

Basándose en la respuesta anterior que aquí hay una función que se recorra el almacenamiento local por clave sin conocer los valores 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 los elementos agregados por su código tienen un tipo de cadena. Mientras que los elementos incorporados son funciones {[código nativo]} o en el caso de la propiedad de longitud un número. Puede usar el tipo de variable Key para filtrar solo en las cadenas para que solo se muestren sus elementos.

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

Answer 4

Además de todas las otras respuestas, puede utilizar $ .Cada función:

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

    // key magic 
    // value magic 

}); 

Con el tiempo, obtener el objeto con:

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

Answer 5

Todas estas respuestas ignorar las diferencias entre las implementaciones de localStorage en navegadores. Los contribuyentes en este dominio deberían calificar sus respuestas con las plataformas que están describiendo. Una implementación en 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.

Answer 6

La forma más sencilla es:

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