Это было отличное упражнение и код, который по сути имитирует список дел.

Локальное хранилище — полезный инструмент для небольших приложений, использующих хранилище на стороне клиента для сохранения данных, вместо того, чтобы настраивать базу данных или знать какую-либо внутреннюю часть.

Все это означает, что пользователь может вносить изменения на страницу, обновлять или закрывать, возвращаться, и информация останется такой же, какой она была.

Использовать локальное хранилище на самом деле очень просто, если вы никогда раньше этого не делали. У него довольно интуитивный синтаксис. Примеры:

localStorage.setItem('itemName', 'Hello');
localStorage.getItem('itemName');
delete localStorage.itemName;

Что-то действительно важное, что также всплывает в этом упражнении, — делегирование событий.

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

Таким образом, нам нужно было бы захватить родительский контейнер, который присутствует при загрузке страницы, и добавить прослушиватель событий к этому элементу. Затем мы можем использовать событие для фильтрации любой функциональности, которая соответствует нашим потребностям.

Я обязательно ознакомлюсь с более подробными статьями ниже о вариантах хранения и делегировании событий.

В конце упражнения Уэс предлагает вам добавить еще несколько кнопок, чтобы удалить, установить или снять все флажки для элементов списка, что на этом этапе кода будет достаточно простым для вас с тем, что у вас есть. только что узнал.

Дополнительное чтение: