как правильно перечислить все локальное хранилище на странице в javascript?

Question

Я пытаюсь показать все свои значения элементов localalstorage на моей странице индекса, но по какой-то причине оно не отображается. Кто-нибудь может увидеть, что я делаю неправильно в моем коде ниже. В моем скрипте индексной страницы я зацикливаюсь на длине локального хранилища и пытаюсь отобразить их на экране, единственное, что отображается, это один элемент. Пожалуйста помоги. Спасибо за вашу помощь.

вот мой код (скрипт страницы индекса):

 document.addEventListener("DOMContentLoaded", function (event) {
        var dataFromLocalStorage = "";
        for (var i = 0; i < localStorage.length; i++) {
            dataFromLocalStorage =
                dataFromLocalStorage + " " + localStorage.getItem(`key${i}`);
        }
        document.querySelector("#content").innerHTML = dataFromLocalStorage; // Updating same thing
})

Другой скрипт, куда я загружаю его в localStorage:

var addToTheContent = document.getElementById("canvas");
     var scheduleEvent = document.getElementById("scheduleStartTime");
     var candidateId = document.getElementById('candsId');
     var getCandId = document.getElementById("candsId");

     var displayCandId = candidateId.options[candidateId.selectedIndex].value;

     var id = 1;

     function addTheEvent() {
         var showText = addToTheContent.innerHTML = displayCandId + " ( " + scheduleEvent.value + " ) ";
         localStorage.setItem(`key${id}`, JSON.stringify(showText))
         id += 1
         localStorage.getItem(`key${id}`);
         window.location = "/";
     }  

Answer 1

"ключ $ {id}" является строкой шаблона, вам нужно использовать кавычки `` вместо кавычек "".

Вы также можете l oop через localStorage, как обычно для большинство JavaScript объектов:

for(var key in localStorage) {
  if(localStorage.hasOwnProperty(key)) { // ignore the prototype methods

    // Do whatever you want with key and value found here
    console.log(key + ": " + localStorage[key]);
  }
}

Answer 2

Опечатка: используйте i вместо id

var dataFromLocalStorage = localStorage.getItem(`key${id}`);

правильно:

var dataFromLocalStorage = `localStorage.getItem("key${i}");

Другое дело, вы обновляете тоже самое innerHTML

var dataFromLocalStorage = "";
for (var i = 0; i < localStorage.length; i++) {
  dataFromLocalStorage =
    dataFromLocalStorage + " " + localStorage.getItem(`key${i}`);
}
document.querySelector("#content").innerHTML = dataFromLocalStorage; // Updating same thing

// do something with localStorage.getItem(localStorage.key(i));

// отсутствует строка шаблона 'key $ {id}'

var id = 1;
function addTheEvent() {
  var showText = displayCandId + " ( " + scheduleEvent.value + " ) ";
  localStorage.setItem(`key${id}`, JSON.stringify(showText));
  id += 1;
  window.location = "/";
}