Блог

Возникла проблема с внедрением локального хранилища в мой список дел. Я просмотрел тонну видео, понял синтаксис и т.д., Но я не могу понять, как это реализовать в моем коде. Я пытаюсь добиться того, чтобы приложение для выполнения задач сохраняло задачи(чтобы они оставались на сайте после перезагрузки) и хранило их в локальном хранилище.

 window.addEventListener('load', () =gt; {  const form = document.querySelector("#new-task-form");  const input = document.querySelector("#new-task-input");  const list_el = document.querySelector("#tasks");  const storeTasks = [];   localStorage.setItem('Stored Task', JSON.stringify(storeTasks));  storeTasks.append(input.value);  localStorage.getItem('Stored Task');   console.log(storeTasks);   /*localStorage.setItem('tasks', "list_el");  localStorage.getItem('list_el');*/  console.log(list_el);   form.addEventListener('submit', (e) =gt; {  e.preventDefault();   const task = input.value;   if (!task) {  alert("Add onto the bucketlist!");  return "";  }   const task_el = document.createElement('div');  task_el.classList.add('task');   const task_content_el = document.createElement('div');  task_content_el.classList.add('content');   task_el.appendChild(task_content_el);   const task_input_el = document.createElement('input');  task_input_el.classList.add('text');  task_input_el.type = 'text';  task_input_el.value = task;  task_input_el.setAttribute('readonly', 'readonly');   task_content_el.appendChild(task_input_el);     const task_actions_el = document.createElement('div');  task_actions_el.classList.add('actions');    const task_edit_el = document.createElement('button');  task_edit_el.classList.add('edit');  task_edit_el.innerText = 'Edit';    const task_delete_el = document.createElement('button');  task_delete_el.classList.add('delete');  task_delete_el.innerText = 'Delete';    task_actions_el.appendChild(task_edit_el);  task_actions_el.appendChild(task_delete_el);   task_el.appendChild(task_actions_el);     list_el.appendChild(task_el);   input.value = '';   task_edit_el.addEventListener('click', (e) =gt; {  if (task_edit_el.innerText.toLowerCase() == "edit") {   task_edit_el.innerText = "Save";  task_input_el.removeAttribute("readonly");  task_input_el.focus();  } else {  task_edit_el.innerText = "Edit";  task_input_el.setAttribute("readonly", "readonly");  }  });   task_delete_el.addEventListener('click', (e) =gt; {  list_el.removeChild(task_el);  });  }); });   

Похоже, проблема в том, что вы сохраняете список в локальном хранилище, прежде чем добавлять в него элементы.

А потом попробуй это изменить. localStorage не «обновляется» при изменении сохраненной переменной. Он обновляется, когда вы указываете ему обновить, поэтому вам нужно вызывать localStorage.setItem всякий раз, когда вы добавляете новые элементы.

И помните, что localStorage сохраняет строку, поэтому вам понадобится JSON.parse ваш результат из localStorage.GetItem, чтобы превратить его обратно в объект JS.