Comment puis-je afficher toutes les variables sauvegardées de localStorage ?

Question

Je veux accéder à toutes les variables localStorage enregistrées sur une page spécifique. Comment dois-je m'y prendre ? Je veux les afficher comme je le ferais pour un tableau avec la fonction join().

Answer 1

En m'inspirant de cette page, j'utilise maintenant ceci :

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

Merci à tous !

Answer 2

Selon la situation, le Object.keys() y Object.entries() peuvent être utiles. Avec leur aide, il est facile de créer un tableau de clés stocké dans le fichier localStorage ou un tableau de paires [clé, valeur]. Vous pouvez ensuite filtrer ces tableaux, les mettre en correspondance et les faire défiler facilement.

---

Exemple 1 : affiche les clés de toutes les valeurs stockées dans localStorage

console.log(Object.keys(localStorage));

Exemple 2 : efface localStorage sauf pour les touches sélectionnées

const importantKeys = [ 'JSESSIONID', 'cart' ];
Object.keys(localStorage)
    .filter(key => !importantKeys.includes(key))
    .forEach(key => localStorage.removeItem(key));

Exemple 3 : itère sur localStorage paires clé-valeur

Object.entries(localStorage).forEach(([ key, value ]) => {
    console.log(`${key} => ${value}`);
})

Answer 3

Pour aller plus loin, l'exemple suivant récupère tout ce qui se trouve dans le localStorage.

Quel que soit le type d'entrée, objet, tableau ou simplement un valeur .

Et écrire tout bien remis en place.

Utile pour sauvegarder/exporter/restaurer n'importe quelle configuration donnée !

function getLocalItems(k){
  if (k){
    try{
      return JSON.parse(localStorage.getItem(k))
     } catch(e){
       return localStorage.getItem(k)
    }
  }
}

function setLocalItems(k, value){
  if (typeof value === 'object') {
    value = JSON.stringify(value)
  }
  localStorage.setItem(k, value)
}

// Put all entries in an object «store»
let store = {}
for (let i = 0, l = localStorage.length; i < l; i++) {
  store[localStorage.key(i)] = getLocalItems(localStorage.key(i))
}
console.log(store)

// Write all keys of «store» in localStorage
for (let o in store) {
  setLocalItems(o, store[o])
}

Vous pouvez ensuite envoyer cet objet "store" à votre serveur, pour une sauvegarde/restauration après connexion.

Après des expériences, dans le cas d'une utilisation intensive du localStorage, c'est une bonne idée d'utiliser cet objet "store" dans les scripts, cela permet de garder toutes les valeurs en mémoire pour un accès i/o plus rapide, car pas d'écriture dure sur le disque.

Quoi qu'il en soit, le localStorage est extrêmement puissant, nous pouvons réaliser des choses complexes. Utilisez-le de manière à ce que vos scripts n'échouent pas si les clés du localStorage sont manquantes ou corrompues.

Permettre aux utilisateurs d'effacer toutes les configurations locales à l'aide d'un bouton ou automatiquement après la déconnexion, est également une bonne idée !

Answer 4

J'ai raffiné le script par Cryptopat pour être prêt à copier et coller, et fonctionner avec localStorage ainsi que 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"