Блог

Я столкнулся с проблемой и не могу ее решить. Я пытаюсь извлечь данные из локального хранилища и установить local_storage_key в качестве значения атрибута, а local_storage_value в качестве innerHTML для div.

У меня есть три элемента, хранящихся в локальном хранилище, однако по какой-то причине создается только один элемент (т. Е. Один div с атрибутом, равным local_storage_key, и его значение innerHTML равно local_storage_value).

Как я могу получить все три элемента и отобразить их в HTML?

Вот мой код:

 for (let i = 0; i < localStorage.length; i  ) {
    let key = localStorage.key(i);
    let newDiv = document.createElement("div");

    newDiv.classList.add("task");
    newDiv.setAttribute("task-id", key);
    newDiv.innerHTML = localStorage.getItem(key);
    form.insertAdjacentElement("afterend", newDiv);
  }
 

Вот код, который сохраняет данные из входных данных в local_storage.

 function createTask() {
  submit.addEventListener("click", (e) => {
    e.preventDefault(); // needed to prevent page from refresh upon click on submit

    let data = input.value;

    if (data === "") {
      return; // check-up to forbid passing an emty value
    } else {
      let newTask = document.createElement("div");
      newTask.classList.add("task");
      newTask.textContent = data;
      form.insertAdjacentElement("afterend", newTask);
      input.value = "";

      function generateRandomInteger(max) {
        return Math.floor(Math.random() * max)   1;
      }

      let storageId = generateRandomInteger(20);
      let storageValue = data;

      newTask.setAttribute("task-id", storageId);
      localStorage.setItem(storageId, storageValue);
    }
  });
}