Как показать все сохраненные переменные localStorage?

Ответ 1

Вы можете попробовать выполнить итерацию всех элементов в объекте localStorage:

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

Ответ 2

Я часто использую этот блок кода:

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)) + "]");
}

Ответ 3

вы также можете проверить статус и данные localStorage прямо в инструментах разработчика Google Chrome

Ответ 4

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

Ответ 5

Консольный журнал локального хранилища. Это очень просто.

console.log(localStorage);

Ответ 6

Принимая подсказки с этой страницы, я сейчас использую это:

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

Спасибо всем!

Ответ 7

Чтобы расширить это, следующее извлекает все в localStorage.

Независимо от типа записи, объекта, массива или просто значения.

И напиши все хорошо обратно на место.

Полезно для сохранения/экспорта/восстановления любой конфигурации!

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])
}

Затем вы можете отправить этот объект "store" на ваш сервер для резервного копирования/восстановления после входа в систему.

После экспериментов, в случае интенсивного использования localStorage, было бы неплохо использовать этот объект "store" в скриптах, это сохраняет все значения в памяти для более быстрого доступа ввода-вывода, потому что нет жесткой записи на диск.

В любом случае localStorage очень мощный, мы можем делать сложные вещи. Используйте его так, чтобы ваши скрипты не выходили из строя, если ключи localStorage отсутствуют или повреждены.

Позволить пользователям стирать все локальные конфигурации с помощью кнопки или автоматически после выхода из системы, это также хорошая идея!

Ответ 8

Я усовершенствовал скрипт Cryptopat, чтобы он был готов к копированию + вставке и работал как с localStorage, так и с sessionStorage. Это удобно для воспроизведения полного хранилища 1:1 на другом компьютере.

Протестировано на 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"