Obtenha chaves de armazenamento local HTML5

Eu só estou querendo saber como obter todos os valores-chave no localStorage .


Eu tentei recuperar os valores com um simples loop de JavaScript

 for (var i=1; i <= localStorage.length; i++) { alert(localStorage.getItem(i)) } 

Mas funciona somente se as chaves forem números progressivos, começando em 1.


Como faço para obter todas as chaves, para exibir todos os dados disponíveis?

 for (var key in localStorage){ console.log(key) } 

EDIT: esta resposta está recebendo um monte de upvotes, então eu acho que é uma questão comum. Eu sinto que devo isso a alguém que pode tropeçar na minha resposta e pensar que é “certo” só porque foi aceito para fazer uma atualização. A verdade é que o exemplo acima não é o jeito certo de fazer isso. A melhor e mais segura maneira é fazer assim:

 for ( var i = 0, len = localStorage.length; i < len; ++i ) { console.log( localStorage.getItem( localStorage.key( i ) ) ); } 

Eu gosto de criar um object facilmente visível com isso.

 Object.keys(localStorage).reduce(function(obj, str) { obj[str] = localStorage.getItem(str); return obj }, {}); 

Eu faço uma coisa semelhante com cookies também.

 document.cookie.split(';').reduce(function(obj, str){ var s = str.split('='); obj[s[0].trim()] = s[1]; return obj; }, {}); 
 function listAllItems(){ for (i=0; i<=localStorage.length-1; i++) { key = localStorage.key(i); alert(localStorage.getItem(key)); } } 

Você pode usar a function localStorage.key (index) para retornar a representação de string.

Se o navegador suportar o HTML5 LocalStorage, ele também deverá implementar o Array.prototype.map, permitindo isso:

 Array.apply(0, new Array(localStorage.length)).map(function (o, i) { return localStorage.key(i); }) 

Uma vez que a questão mencionada encontrando as chaves, eu imaginei que para mostrar cada par chave e valor, você poderia fazer assim (com base na resposta de Kevin):

 for ( var i = 0, len = localStorage.length; i < len; ++i ) { console.log( localStorage.key( i ) + ": " + localStorage.getItem( localStorage.key( i ) ) ); } 

Isto irá registrar os dados no formato "chave: valor"

(Kevin: sinta-se livre para apenas levar esta informação para a sua resposta, se você quiser!)

Eu concordo com Kevin, ele tem a melhor resposta, mas às vezes quando você tem chaves diferentes em seu armazenamento local com os mesmos valores, por exemplo, você quer que seus usuários públicos vejam quantas vezes eles adicionaram seus itens em suas cestas você precisa mostrar a eles número de vezes também, então você pode usar isso:

 var set = localStorage.setItem('key', 'value'); var element = document.getElementById('tagId'); for ( var i = 0, len = localStorage.length; i < len; ++i ) { element.innerHTML = localStorage.getItem(localStorage.key(i)) + localStorage.key(i).length; } 

Nós também podemos ler pelo nome.

Digamos que salvamos o valor com o nome ‘user’ assim

 $localStorage.user = user_Detail; 

Então podemos lê-lo usando

 localStorage["ngStorage-user"]; 

Eu usei e está funcionando bem, sem necessidade de fazer o loop for

Para aqueles que mencionam o uso de Object.keys(localStorage) … não porque não funcionará no Firefox (ironicamente porque o Firefox é fiel à especificação). Considere isto:

 localStorage.setItem("key", "value1") localStorage.setItem("key2", "value2") localStorage.setItem("getItem", "value3") localStorage.setItem("setItem", "value4") 

Como key, getItem e setItem são methods prototypal, Object.keys(localStorage) só retornará ["key2"] .

Você é melhor fazer algo assim:

 let t = []; for (let i = 0; i < localStorage.length; i++) { t.push(localStorage.key(i)); }