Comment récupérer tous les éléments localStorage sans connaître les clés à l'avance?
Je veux montrer toutes les clés et le stockage écrits avant. Mon code est ci-dessous. J'ai créé une fonction (allStorage) mais cela ne fonctionne pas. Comment puis-je faire cela?
function storeUserScribble(id) {
var scribble = document.getElementById('scribble').innerHTML;
localStorage.setItem('userScribble',scribble);
}
function getUserScribble() {
if ( localStorage.getItem('userScribble')) {
var scribble = localStorage.getItem('userScribble');
}
else {
var scribble = 'You can scribble directly on this sticky... and I will also remember your message the next time you visit my blog!';
}
document.getElementById('scribble').innerHTML = scribble;
}
function clearLocal() {
localStorage.clear();
return false;
}
function allStorage() {
var archive = [];
for (var i = 0; i<localStorage.length; i++) {
archive[i] = localStorage.getItem(localStorage.key(i));
}
}
6 réponses
Si vous modifiez votre fonction pour cela, vous pouvez lister tous les éléments clés (liste uniquement):
function allStorage() {
var values = [],
keys = Object.keys(localStorage),
i = keys.length;
while ( i-- ) {
values.push( localStorage.getItem(keys[i]) );
}
return values;
}
Object.keys est un nouvel ajout à JavaScript (ECMAScript 5). Il répertorie toutes les clés propres sur un objet qui est plus rapide que d'utiliser une boucle for-in qui est l'option pour cela.
Cependant, cela n'affichera pas les clés. Pour cela, vous devez retourner un objet au lieu d'un tableau (ce qui est plutôt IMO sans point car cela vous amènera aussi loin que vous étiez auparavant avec localStorage juste avec un objet différent-mais par exemple):
function allStorage() {
var archive = {}, // Notice change here
keys = Object.keys(localStorage),
i = keys.length;
while ( i-- ) {
archive[ keys[i] ] = localStorage.getItem( keys[i] );
}
return archive;
}
Si vous voulez une liste de format compact, faites-le à la place-ici chaque élément du tableau aura key=item que vous pourrez ensuite diviser en paires et ainsi de suite:
function allStorage() {
var archive = [],
keys = Object.keys(localStorage),
i = 0, key;
for (; key = keys[i]; i++) {
archive.push( key + '=' + localStorage.getItem(key));
}
return archive;
}
localStorage n'est pas un tableau, mais un objet, essayez donc de qqch. comme ceci:
for (var a in localStorage) {
console.log(a, ' = ', localStorage[a]);
}
Le moyen le plus simple dans ES2015+ est:
const items = {...localStorage};
// iterate localStorage
for (var i = 0; i < localStorage.length; i++) {
// set iteration key name
var key = localStorage.key(i);
// use key name to retrieve the corresponding value
var value = localStorage.getItem(key);
// console.log the iteration key and value
console.log('Key: ' + key + ', Value: ' + value);
}
Un peu plus succinct:
function getAllLocalStorage() {
return Object.keys(localStorage)
.reduce((obj, k) => {
return { ...obj, [k]: localStorage.getItem(k)}}, {});
}