Хранение данных на клиенте

Цель: познакомиться со способами хранения информации на стороне клиента. Написать программу для работы со списками дел использующую изученные возможности.

Содержание и порядок выполнения лабораторной работы:

1. Изучите способы хранения данных в браузере, их особенности, интерфейс (свойства и методы, которые можно использовать) по материалам в источниках.
2. От ветки main создайте ветку lab7 и переключитесь на нее.
3. Создайте документ html с формой из текстового поля для описания задачи и кнопки для ее добавления. В хедер добавьте и “Время последнего изменения списка”. В футере укажите ваше ФИО.
4. Создайте базу данных в indexedDB и хранилище объектов для хранения задач с ключом, например id и автоинкрементом.
5. Напишите функции для добавления новой задачи в БД, получения всех задач и удаления одной задачи по ключу.
6. При нажатии на кнопку добавить задачу, проведите валидацию поля, чтобы оно не было пустым. Если валидация пройдена, то запишите задачу в БД, а затем отобразите ее в интерфейсе в списке задач, добавив data-атрибут с id этой задачи и кнопку для удаления этой задачи.
7. При нажатии на кнопку удаления задачи, удалите ее используя значение ключа из data-атрибута из БД, после этого удалите ее из интерфейса. Пока задача не удалена из бд, заблокируйте кнопку удаления. Используйте делегирование событий для обработки события нажатия: обработчик на общем родителе и работайте с объектом target.
8. При загрузке страницы считайте все задачи из БД и выведите список задач в интерфейс. Также считайте время последнего изменения из localStorage и отобразите его в хедере.
9. Для вывода ошибок из БД используйте toast из прошлой работы.
10. Напишите функцию, которая записывает в localStorage время последнего изменения списка задач. Используйте эту функцию при успешных операциях добавления и удаления задач из БД.
11. Проведите ручное тестирование в браузере.
12. Отформатируйте документы.
13. Убедитесь, что нет замечаний от ESLint.
14. Зафиксируйте результаты работы с помощью системы контроля версий git и отправьте ветку lab7 в репозиторий на github.
15. Загрузите проект на Render через ручную загрузку (manual deploy).

Требования к JS:

• HTML код валиден.
• Отсутствуют ошибки ESLint в панели Problems в VS Code.
• Отсутствуют ошибки в консоли браузера при работе с веб-страницей.

Результаты выполнения лабораторной работы:

Результаты работы проверены наставником.

Статическая веб-страница на хостинге, со структурой и оформлением, которая соответствует требованиям и сохранена в системе контроля версий.

Источники

1. Хранение данных в браузере - learn js
2. Хранение данных в браузере - doka.guide
3. Client-side storage - MDN
4. Событие storage
5. Атрибуты data-*
6. Делегирование событий
7. Understanding cookies - web.dev

Вопросы для защиты

1. Какие существуют способы хранения данных на стороне клиента?
2. localStorage и sessionStorage. Различие и API.
3. Событие Storage.
4. Cookie. Установка, использование браузером, работа в JS.
5. Идея делегирования событий.
6. Атрибуты data-*. Добавление и чтение.