Как сохранять отредактированное значение задания в localStorage?? Значение Чекбокс сохранятеся, получилось, а вот с этим пунктом что-то не ладится

Question

Есть todo list, по нажатию на Enter новое задание записывается в li, сохраняется в localStorage. Данное задание я могу удалить или поставить галочку Выполнено, также все эти данные сохраняются в localStorage и при перезагрузке страницы отображаются!
Также сделал редактирование Задания (двойной клик на 'span'). Но измененные данные не записываются в localStorage

let div = document.querySelector('div');
let input = document.createElement('input');
input.placeholder = 'Добавьте дело';
let ul = document.querySelector('ul');
div.appendChild(input);
input.focus();

let tasks = [];

if (localStorage.getItem('tasks')) {
  tasks = JSON.parse(localStorage.getItem('tasks'));
}

tasks.forEach(function(task) {
  let li = document.createElement('li');
  let span = document.createElement('span');
  span.id = 'span';
  span.innerHTML = input.value;
  span.dataset.action = 'edit';

  let button = document.createElement('button');
  button.innerHTML = '[х]';
  button.classList.add('deleteBtn');
  button.dataset.action = 'delete';

  let checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.classList.add('checkboxClass');
  checkbox.dataset.action = 'checkbox';

  if (task.done) {
    checkbox.type = 'checkbox';
    checkbox.classList.add('checkboxClass');
    checkbox.dataset.action = 'checkbox';
    checkbox.id = 'check';
    checkbox.checked = true;
  } else {
    checkbox.type = 'checkbox';
    checkbox.classList.add('checkboxClass');
    checkbox.dataset.action = 'checkbox';
    checkbox.id = 'check';
    checkbox.checked = false;
  }

  let taskText = span.innerHTML;

  const cssClass = task.done ? 'span-done' : 'none'

  li.id = `${task.id}`;
  span.innerHTML = `${task.text}`;
  span.classList.add(`${cssClass}`)

  ul.append(li);
  li.prepend(checkbox);
  li.append(span);
  li.append(button);
  return ul;
})

ul.addEventListener('click', deleteTask);
ul.addEventListener('click', doneTask);
ul.addEventListener('dblclick', editTask);
input.addEventListener('keypress', function(event) {
  if (event.key === 'Enter' && this.value.trim()) {
    addTask('', false);
  }
})


function addTask(task) {
  let li = document.createElement('li');
  let span = document.createElement('span');
  span.id = 'span';
  span.innerHTML = input.value;
  span.dataset.action = 'edit';

  let button = document.createElement('button');
  button.innerHTML = '[х]';
  button.classList.add('deleteBtn');
  button.dataset.action = 'delete';

  let checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.classList.add('checkboxClass');
  checkbox.dataset.action = 'checkbox';

  let taskText = span.innerHTML;

  const newTask = {
    id: Date.now(),
    text: taskText,
    done: false,
  }

  tasks.push(newTask)

  const cssClass = newTask.done ? 'span-done' : 'none'

  li.id = `${newTask.id}`;
  span.innerHTML = `${newTask.text}`;
  span.classList.add(`${cssClass}`)

  ul.append(li);
  li.prepend(checkbox);
  li.append(span);
  li.append(button)

  input.focus();
  input.value = '';

  saveToLS();
  return ul;
}

function deleteTask(event) {
  if (event.target.dataset.action !== 'delete') return;
  const parentNode = event.target.closest('li');
  const id = parentNode.id;
  const index = tasks.findIndex(function(task) {
    if (task.id == id) return true
  });

  tasks.splice(index, 1);
  saveToLS();
  parentNode.remove();
  input.focus();
}

function doneTask(event) {
  if (event.target.dataset.action === 'checkbox') {
    const parentNode = event.target.closest('li');

    const id = parentNode.id;

    const task = tasks.find(function(task) {
      if (task.id == id) {
        return true
      }
    })

    task.done = !task.done;

    const taskTitle = parentNode.querySelector('span');
    taskTitle.classList.toggle('span-done');

    saveToLS();
  }
}

function editTask(event) {
  if (event.target.dataset.action === 'edit') {

    let span = event.target;
    let input = document.createElement('input');
    input.type = 'text';

    input.value = span.innerText;
    span.innerText = '';
    span.append(input);
    input.focus();

    input.addEventListener('blur', function(event) {
      if (!this.value.trim()) return;
      span.innerText = this.value;
    });

    saveToLS();
  }
}

function saveToLS() {
  localStorage.setItem('tasks', JSON.stringify(tasks))
}

ul {
  margin-left: 0;
  margin-top: 5px;
  margin-bottom: 5px;
  padding-left: 0;
}

li {
  list-style-type: none;
  padding: 3px;
}

.checkboxClass {
  padding-right: 3px;
}

.checkboxClass,
.deleteBtn:hover {
  cursor: pointer;
}

span {
  padding-left: 3px;
  padding-right: 4px;
  font-size: 13pt;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.span-done {
  opacity: 0.6;
  text-decoration-line: line-through;
}

.deleteBtn {
  margin: 0;
  padding: 0;
  padding-left: 2px;
  background-color: transparent;
  border: 0;
  /* font-size: 10pt;
            font-family:Georgia, 'Times New Roman', Times, serif;
            font-style: italic; */
}

<div class="container">
</div>

<ul class="list">
</ul>

БЛОГ НА HUSL

Как сохранять отредактированное значение задания в localStorage?? Значение Чекбокс сохранятеся, получилось, а вот с этим пунктом что-то не ладится

Ответы (0 шт):