Looping attraverso localStorage in HTML5 e JavaScript

Question

Quindi, stavo pensando che potrei semplicemente passare in loop in localStorage come un oggetto normale in quanto ha una lunghezza. Come posso scorrere questo?

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

Se faccio un localStorage.length restituisce 3 che è corretto. Quindi suppongo che un ciclo for...in funzionerebbe.

Stavo pensando qualcosa del tipo:

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

Ma senza alcun risultato. Qualche idea?

L'altra idea che avevo era qualcosa di simile

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

In cui il for...in funziona.

Answer 1

È possibile utilizzare il metodo key. localStorage.key(index) restituisce la chiave index (l'ordine è definito dall'implementazione ma costante fino all'aggiunta o rimozione di chiavi).

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

Se le questioni di ordine, è possibile memorizzare una matrice JSON-serializzato:

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

Il progetto di spec sostiene che qualsiasi oggetto che supporta structured clone può essere un valore. Ma questo non sembra essere ancora supportato.

EDIT: Per caricare l'array, aggiungere ad esso, poi negozio:

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

Answer 2

Questo funziona per me in Chrome:

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

Answer 3

Basandosi sul precedente risposta qui è una funzione che scorrere la memoria locale per chiave senza conoscere i valori chiave.

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

Se si esamina l'output della console, vedrete che gli elementi aggiunti dal vostro codice hanno tutti una stringa di tipo. Mentre gli elementi predefiniti sono o funzioni {[codice nativo]} o nel caso della proprietà lunghezza un numero. È possibile utilizzare la variabile typeofKey per filtrare solo sulle stringhe in modo che vengano visualizzati solo gli elementi.

Nota questo funziona anche se si memorizza un numero o un valore booleano come entrambi sono memorizzati come stringhe.

Answer 4

In aggiunta a tutte le altre risposte, è possibile utilizzare $ .each funzione:

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

    // key magic 
    // value magic 

}); 

Alla fine, ottenere l'oggetto con:

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

Answer 5

Tutte queste risposte ignorare le differenze tra le implementazioni di localStorage attraverso i browser. I contributori in questo dominio dovrebbero qualificare pesantemente le loro risposte con le piattaforme che stanno descrivendo. Un'implementazione a livello di browser è documentata a https://developer.mozilla.org/en/docs/Web/API/Window/localStorage e, mentre molto potente, contiene solo alcuni metodi di base. La riproduzione di contenuti richiede la comprensione dell'implementazione specifica dei singoli browser.

Answer 6

Il modo più semplice è:

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