Как правильно реализовать local storage в тудулисте в стиле ООП, чтобы удалять элементы?

Question

[Levingstoun]

Здравствуйте. Нужна помощь с тудулистом.
Пишу тудулист в стиле ООП, впервые используя классы. Что-то написал не до конца, но столкнулся с проблемой - с локальным хранилищем, или точнее с синхронизацией его с определенными действиями.
Я хочу в локал сторедж хранить и удалять задачи. Хранить получается, а вот удалять не совсем корректно. Дело в том, что задачи удаляются как надо на первый взгляд, но когда перезагружаешь страницу, то допустим из 5 удаленных задач всегда удаляется только одна, а не допустим все, или 2-3 задачи. Остальные будут на месте.
Помогите исправить код.
Спасибо.
https://codesandbox.io/s/recursing-darkness-7v46e

Comments

[Александр]

Ну в таком случай, для начала, хранить HTML код в localStorage так себе идея. Он то не резиновый и хранит 5-10 мегабайт данных.

Answer 1

[Александр Епихин]

1) Методы completedTask и uncompletedTask практически одинаковые. Объедините их и в объединенный метод передавайте аргумент.
2)

const toDoParent = document.querySelector("#todo-block");

Часто у вас встречается. Нет никакого смысла так делать. Вынесите в конструктор
3) localStorage.setItem и localStorage.getItem нужно вынести в отдельную абстракции ввиде класса Storage с методами get и set.
4) Вам стоит выделить как минимум три сущности ToDoList - он будет вызывать ToDo и Storage
ToDoList - создает новую задачу (new ToDo) и общается с хранилищем (Storage)
ToDo - знает как только создать отдельную dom ноду в зависимости от переданных параметров и возвращает эту ноду,
Storage - работает с хранилищем, записывает в него или читает, в данном случае это localStorage, а может быть что-то другое. Например заходите писать в куки. Вы меняете реализацию методов set и get и приложение в лице ToDoList все также продолжит работать. Так как ему не важна реализация Storage, а важен лишь интерфейс к нему (get и set)

Comments

[Алексей]

Очень понравилось ваше объяснение. Подскажите где можно почитать про подобные практические примеры о том что лучше что то в один класс, что то в другой.

Есть базовое понимание ОПП, но нету понимания когда создавать целый класс, а когда достаточно метода в другом классе.

Все примеры, что находил очень условные - с животными, тип вот класс "животные", а вот наследующий класс "осел" и т.д. Хотелось бы примеры из реальной практики. Какое то небольшое приложение, где классы, это формы, календари и т.д, а не крокодилы или зайцы

[Александр Епихин]

Могу посоветовать курс на hexlet.io. И если язык не принципиален, то там же есть про ООП в PHP.
По JS книгу посоветовать не могу. А вот по PHP Зандстра - там есть хорошие примеры. Язык хоть и другой (для начала чтения книги его практически не нужно знать) , но смысл один и тот же.

Answer 2

[Alex]

Разделите совой код на два класса:

1. class Task — содержит в себе статус, заголовок и всё что нужно для отрисовки самого себя
   
2. class TodoList — коллекция объектов Task — содержит в себе логику по созданию новых тасков их удалению и так далее.
   

И вот в таком случае в class TodoList можно легко добавить логику для синхронизации с локальным хранилищем.