Как удалять элементы с local storage?

Question

[osimone]

Сделал в песочнице туду лист с local storage, задачи сохраняются в локале, но после перезагрузки у них не работает кнопка удалить (в общем не удаляются и не выделяются после перезагрузки страницы) подскажите как удалять с локалки и со страницы эти задачи?

https://codepen.io/osim-khusainov/pen/WNGZGob

Comments

[WbICHA]

В твоём случае надо не удалять, а перезаписывать.

Answer 1

[Vladimir Lewandowski]

В комментах верно написали, дополню чуть. Вам нужно не удалять элемент, а целиком перезаписывать массив задач. Причём, не важно, что вы делаете с элементом: удаляете, добавляете или редактируете.

Comments

[osimone]

не совсем понимаю как перезаписывать массив задач?

[Петр]

osimone, абстрагируйтесь от localStorage. Куда бы вы записывали задачи? В массив. Работайте с списком задач как с массивом. И после каждой операции делайте сохранение содержимого массива в localStorage.
При загрузке страницы, проверяйте содержимое localStorage. Если что то там есть, то записывайте в массив а из содержимого массива стройте список задач.

[Vladimir Lewandowski]

osimone, а как вы изначально туда что-то записали, что теперь не можете удалить?

[osimone]

Vladimir Lewandowski,
вот мой код, там немного комментарии прописал. Мне кажется что с моим кодом здесь не получится никаких перезаписей? так как массив не создавался, или я что то не так делаю

const input = document.querySelector("input");
const btn = document.querySelector(".delete-btn");
const blockList = document.querySelector(".block__list");

//здесь создал по примеру из интернета localstorage и вписал эту функцию во всех функциях и обработчиках, все сохраняется, но после перезагрузки если нажать на кнопку delete то задача не удаляется
let todo;
function todoLocal(){
  todo = blockList.innerHTML;
  localStorage.setItem('todos', todo);
}

//эта функция которая создает внутри block__list лишки  с задачами и кнопкой delete
function createElenet(e) {
  e.preventDefault();
  const li = document.createElement("li");
  const deleteBtn = document.createElement("button");
  deleteBtn.className = "block__button-delete";
  deleteBtn.textContent = "delete";
  li.classList.add("block__li");
  li.textContent = input.value;
  li.appendChild(deleteBtn);
  blockList.appendChild(li);
//здесь я сразу же добавил кнопке возможность удалять задачу при клике
  deleteBtn.addEventListener("click", (e) => {
    blockList.removeChild(li);
    todoLocal()
  });
// при клике на Ли менять бэкгрануд на красный
  li.addEventListener('click', () => {
    li.classList.toggle('task_done')
    todoLocal()
  });

}
//эта функция для добавления элементов на странице при клике на кнопку ADD
function addTask(e) {
  if (input.value === "") {
    return alert("введите сообщение");
  } else {
    createElenet(e);
    input.value = "";
    todoLocal()
  }
}
if(localStorage.getItem('todos')){
  newArr = localStorage.getItem('todos')
}

btn.addEventListener("click", addTask);

[osimone]

const btn = document.querySelector(".delete-btn");

кстати здесь вместо delete кнопка add (просто разные названия класса)