Занятие 4. JavaScript, DOM и localStorage

Демонстрация: список задач

Добавьте несколько задач, отметьте выполненные и перезагрузите страницу — данные сохранятся в localStorage вашего браузера.

Задач нет

Разбор ключевых приёмов

1. Создание элемента

const li = document.createElement('li');
li.className = 'todo-item';
li.textContent = task.text;      // безопасно: текст, а не HTML
list.append(li);                 // добавление в конец списка

2. Делегирование событий

Вместо обработчика на каждой кнопке — один на весь список. Работает и для элементов, которые появятся позже.

list.addEventListener('click', (event) => {
  const btn = event.target.closest('[data-action="delete"]');
  if (!btn) return;                       // клик не по кнопке — игнорируем
  const id = btn.closest('.todo-item').dataset.id;
  removeTask(id);
});

3. Сохранение в localStorage

const KEY = 'mw-course-todos';

function save() {
  // localStorage хранит только строки — объект сериализуем в JSON
  localStorage.setItem(KEY, JSON.stringify(tasks));
}

function load() {
  try {
    return JSON.parse(localStorage.getItem(KEY)) || [];
  } catch (e) {
    return [];   // повреждённые данные не должны ломать приложение
  }
}

Безопасность. Никогда не вставляйте пользовательский ввод через innerHTML — это открывает путь к XSS-атакам. Используйте textContent или element.append(document.createTextNode(...)).

Три способа что-то сохранить на клиенте

Хранилище	Объём	Время жизни	Когда использовать
`localStorage`	~5 МБ	До удаления вручную	Настройки, черновики, прогресс
`sessionStorage`	~5 МБ	До закрытия вкладки	Данные одного сеанса, шаги мастера
`document.cookie`	~4 КБ	Задаётся вручную	Только то, что нужно серверу (сессии, согласия)

Все три варианта привязаны к домену и доступны из JavaScript, поэтому не храните там пароли и токены доступа.

Задание

Добавьте к задаче дату создания и выводите её рядом с текстом.
Сделайте кнопку «Редактировать»: по двойному клику текст заменяется на input.
Добавьте сортировку: сначала активные, затем выполненные.
Перенесите фильтр в адресную строку через location.hash, чтобы состояние фильтра тоже сохранялось.