Loop por meio de localStorage em HTML5 e JavaScript

Então, eu estava pensando que poderia simplesmente percorrer localStorage como um objeto normal, pois tem um comprimento. Como posso fazer um loop por isso?

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

Se eu fizer um, localStorage.lengthele retorna o 3que está correto. Então, eu presumo que um for...inloop funcione.

Eu estava pensando algo como:

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

Mas não adiantou. Alguma ideia?

A outra ideia que tive foi algo como

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

Em que for...infunciona.

Você pode usar o keymétodo. localStorage.key(index)retorna a indexenésima chave (a ordem é definida pela implementação, mas constante até que você adicione ou remova chaves).

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

Se o pedido for importante, você pode armazenar uma matriz serializada JSON:

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

O rascunho das especificações afirma que qualquer objeto que suporte clone estruturado pode ser um valor. Mas isso ainda não parece ser compatível.

EDITAR: Para carregar a matriz, adicione a ela e armazene:

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

A maneira mais simples é:

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

Além de todas as outras respostas, você pode usar a função $ .each da biblioteca jQuery:

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

  // key magic
  // value magic

});

Eventualmente, obtenha o objeto com:

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

Isso funciona para mim no Chrome:

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

Com base na resposta anterior, aqui está uma função que percorrerá o armazenamento local por chave, sem conhecer os valores da chave.

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

Se você examinar a saída do console, verá que todos os itens adicionados pelo seu código têm uma string typeof. Considerando que os itens embutidos são funções {[código nativo]} ou, no caso da propriedade de comprimento, um número. Você pode usar a variável typeofKey para filtrar apenas nas strings, de forma que apenas seus itens sejam exibidos.

Observe que isso funciona mesmo se você armazenar um número ou booleano como o valor, pois ambos são armazenados como strings.

Todas essas respostas ignoram as diferenças entre as implementações de localStorage nos navegadores. Os contribuidores neste domínio devem qualificar fortemente suas respostas com as plataformas que estão descrevendo. Uma implementação em todo o navegador está documentada em https://developer.mozilla.org/en/docs/Web/API/Window/localStorage e, embora muito poderoso, contém apenas alguns métodos principais. O loop através do conteúdo requer uma compreensão da implementação específica para navegadores individuais.

localStorageé um Object.

Podemos percorrê-lo com JavaScript for / in Statement como qualquer outro objeto.

E usaremos .getItem()para acessar o valor de cada chave (x).

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