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

Question

Я хочу получить доступ ко всем переменным localStorage, сохраненным на определенной странице.Как я могу это сделать?Я хочу показать это так, как я бы показал массив с функцией join ()

Answer 1

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

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

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

Answer 3

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

Answer 4

Консольный журнал localStorage.Это очень просто.

console.log(localStorage);

Answer 5

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

Answer 6

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

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

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

Answer 7

Я усовершенствовал скрипт от 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"

Answer 8

Чтобы расширить это, следующее извлекает все в 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 отсутствуют или повреждены.

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