Looping attraverso localStorage in HTML5 e JavaScript

Quindi, stavo pensando di poter eseguire il loop attraverso localStorage come un oggetto normale poiché ha una lunghezza. Come posso eseguire il loop attraverso questo?

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

Se lo faccio localStorage.lengthrestituisce 3che è corretto. Quindi presumo che un for...inciclo funzionerebbe.

Stavo pensando qualcosa del tipo:

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

Ma nessun 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 for...infunziona.

Puoi usare il keymetodo. localStorage.key(index)restituisce la indexchiave esima (l'ordine è definito dall'implementazione ma costante finché non si aggiungono o rimuovono le chiavi)

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

Se l'ordine è importante, puoi memorizzare un array serializzato in JSON:

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

La bozza della specifica afferma che qualsiasi oggetto che supporta il clone strutturato può essere un valore. Ma questo non sembra ancora essere supportato.

EDIT: per caricare l'array, aggiungilo, quindi memorizza:

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

Il modo più semplice è:

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

Oltre a tutte le altre risposte, puoi utilizzare la funzione $ .each dalla libreria jQuery:

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

  // key magic
  // value magic

});

Alla fine, ottieni l'oggetto con:

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

Questo funziona per me in Chrome:

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

Sulla base della risposta precedente, ecco una funzione che eseguirà il ciclo dell'archiviazione locale per chiave senza conoscere i valori della chiave.

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

Se esamini l'output della console vedrai che gli elementi aggiunti dal tuo codice hanno tutti un tipo di stringa. Mentre gli elementi incorporati sono funzioni {[codice nativo]} o, nel caso della proprietà length, un numero. È possibile utilizzare la variabile typeofKey per filtrare solo le stringhe in modo che vengano visualizzati solo gli elementi.

Nota che funziona anche se memorizzi un numero o un valore booleano come valore poiché sono entrambi memorizzati come stringhe.

Tutte queste risposte ignorano le differenze tra le implementazioni di localStorage nei browser. I contributori in questo dominio dovrebbero qualificare fortemente le loro risposte con le piattaforme che stanno descrivendo. Un'implementazione a livello di browser è documentata su https://developer.mozilla.org/en/docs/Web/API/Window/localStorage e, sebbene molto potente, contiene solo pochi metodi di base. Il passaggio tra i contenuti richiede una comprensione dell'implementazione specifica per i singoli browser.

localStorageè un Object.

Possiamo eseguirlo in loop con JavaScript for / in Statement proprio come qualsiasi altro oggetto.

E useremo .getItem()per accedere al valore di ogni chiave (x).

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