Как прикрутить SessionStorage и чтобы на сохраненные элементы работал AddEventListener?

Question

[Arlivs]

//// https://jsfiddle.net/Arlivs/hbm4u90g/3
Здравствуйте, вот код проекта с простой системой Todo для практики, также есть вкладки Completed и Deleted.
1) Как правильно добавлять todo в хранилище и после перезагрузки оставлять его на странице.
Мое не сработавшее решение было в том, что в функции создания todo, в конце в SesStorage добавлялся блок всех тудушек, и после перезагрузки блок переносится в innerHTML его же самого, но нового.
2) Не работают функции todoComplete and todoDelete после F5 (то есть не считываются события нажатия на кнопки, но на элементы, добавленные в этот момент все работает)
Да многовато и может глупо написано, но заранее спасибо

Answer 1

[Вадим]

Как прикрутить SessionStorage и чтобы на сохраненные элементы работал AddEventListener

Так как Вы сохраняете в session storage строку с разметкой, то обработчики кликов в таком случае должны быть не на элементах, а на их родительском контейнере. Этот приём называется делегирование суть которого заключается в том, что Вы вешаете один обработчик на родительский элемент и так как большая часть событий всплывает вверх, то в обработчике события смотрите на каком конкретно элементе произошло событие и в зависимости от этого выполняете соответствующее действие.

Альтернативный вариант - сохранять в session storage не строку разметки, а массив объектов, где каждый объект - это информация о конкретном "деле" в списке дел.
Например:

const todos = [
  {
    id: 0,
    text: 'Набросать первую версию todo на лапшичном коде',
    isDone: true,
  },
  {
    id: 1,
    text: 'Освоить делегирование событий',
    isDone: false,
  },
  {
    id: 2,
    text: 'Почитать про простые структуры данных и их применение',
    isDone: false,
  },
]

И через JSON.stringify(todos) сохранять в storage, а через JSON.parse(sessionStorage.getItem('todos')) - считывать обратно в массив объектов, на основе которого заново генерировать разметку.