web-dev-qa-db-fra.com

Comment afficher toutes les variables sauvegardées sur localStorage?

Je souhaite accéder à toutes les variables de stockage locales enregistrées sur une page spécifique. Comment je fais ça? Je veux le montrer comme je montrerais un tableau avec la fonction join ()

javascripthtml5local-storage
49
Ariel

Vous pouvez essayer de parcourir tous les éléments de l'objet localStorage:

for (var i = 0; i < localStorage.length; i++){
    // do something with localStorage.getItem(localStorage.key(i));
}
96
Greg

J'utilise fréquemment ce bloc de code:

var i;

console.log("local storage");
for (i = 0; i < localStorage.length; i++)   {
    console.log(localStorage.key(i) + "=[" + localStorage.getItem(localStorage.key(i)) + "]");
}

console.log("session storage");
for (i = 0; i < sessionStorage.length; i++) {
    console.log(sessionStorage.key(i) + "=[" + sessionStorage.getItem(sessionStorage.key(i)) + "]");
}
25
Mark

vous pouvez également vérifier le statut et les données du stockage local directement dans les outils de développement de Google chrome

11
jujule
for(var i in localStorage) {
    console.log(i + ' = ' + localStorage[i]);
}
4
zanetu

En prenant des allusions de cette page, j'utilise maintenant ceci:

new Array(localStorage.length)
  .fill()
  .map(i => localStorage.key(i));

Merci a tous!

2
Brook Jordan

J'ai affiné le script de Cryptopat pour qu'il soit prêt à copier/coller et que je travaille à la fois avec localStorage et avec sessionStorage. C'est pratique pour reproduire le stockage complet 1: 1 sur une autre machine.

Testé sur Chrome 74.0.3729.131.

function dump(storage) {
    let store = []
    for (let i = 0, l = storage.length; i < l; i++) {
        let key = storage.key(i);
        store.Push({ key: key, value: storage.getItem(key) });
    }
    console.log(JSON.stringify(store))
}

function restore(storage, store, clearBefore) {
    if (clearBefore) {
        storage.clear();
    }

    for (let i = 0, l = store.length; i < l; i++) {
        let item = store[i];
        storage.setItem(item.key, item.value);
    }
}

// usage:
// 
// dump(localStorage); // manual step: copy log output to text file
// dump(sessionStorage);
//
// let contentsFromTextFile = [ ... ]; // manual step: paste from text file
// restore(localStorage, contentsFromTextFile, true);
// restore(sessionStorage, contentsFromTextFile, true);
//
//
// EXAMPLE
// -------
// Given localStorage has one entry with key "foo" and value "bar"
// And I pasted the above code into the console
//
// When I run
//    dump(localStorage)
// Then I see the log output
//    [{"key":"foo","value":"bar"}]
//
// When I run
//    restore(localStorage, [{"key":"foo2","value":"bar2"}], true);
// Then localStorage contains only one entry with key "foo2" and value "bar2"
//
// When I run
//    restore(localStorage, [{"key":"foo3","value":"bar3"}], false);
// Then localStorage contains two entries,
//   one entry with key "foo2" and value "bar2" and
//   one entry with key "foo3" and value "bar3"
1
Jan Papenbrock

Pour prolonger cela, ce qui suit récupère tout dans le localStorage.

Quel que soit le type d’entrée,objet, tableau, ou simplement unvaleur. 

Et écrivez tous bien en place.

Utile pour sauvegarder/exporter/restaurer toute configuration donnée!

function getLocalItem(k){
    if (k){
        try{
            return JSON.parse(localStorage.getItem(k))
        }
        catch(e){
            return localStorage.getItem(k)
        }
    }
}
function setLocalItem(k, value){
    if (typeof value === 'object') {
        value = JSON.stringify(value)
    }
    localStorage.setItem(k, value)
}
let store = {}
for (let i = 0, l = localStorage.length; i < l; i++) {
  store[localStorage.key(i)] = getLocalItem(localStorage.key(i))
}
console.log(store)

for (let o in store) {
   setLocalItem(o, store[o])
}
0
Cryptopat