Давайте представим, что вы пишете диспетчер задач.
Приложение должно работать как нативное: работать как оффлайн, так и онлайн.
Основная концепция
Нашим основным инструментом при создании такого приложения является localstorage. Я не знаком с другими способами реализации этого.Метод, о котором я вам расскажу, я придумал сам и он мне показался удачным.
Как это будет работать?
Итак, у нас есть список задач:Нам необходимо хранить и обновлять текст задачи и статус выполнено/не выполнено, а также реализовать добавление новой задачи.<ul class="tasks"> <li class="task"> <p class="task__text" contenteditable="true">Eggs</p> <input type="checkbox"> </li> <li class="task"> <p class="task__text" contenteditable="true">Breads</p> <input type="checkbox"> </li> </ul> <button class="task__add-btn" type="button">New task</button>
Мы будем генерировать случайный ключ для каждой задачи и использовать его в качестве идентификатора для каждой связанной с ней информации, хранящейся в локальном хранилище.
Аналогично базам данных.
С чего начать?
Прежде всего, мы проверим, есть ли уже в памяти какие-либо задачи.
Все ключи будут храниться в одной строке const savedTokens = localStorage.getItem('tokens');
const root = document.querySelector('.
tasks'); let tokens = []; if (savedTokens != null) { tokens = savedTokens.split(', '); // .
}
Давайте пока разберемся с добавлением новой задачи, чтобы понять концепцию хранения и использования хранимых данных.
При нажатии на кнопку «Добавить задачу» в списке появится шаблонная задача; текст задания можно редактировать.
Теперь мне нужно все это описать.
Давайте создадим функцию, которая создает элемент с его содержимым на основе переданных ему данных.
function getTemplate(token, data) {
const task = document.createElement('li');
task.classList.add('task');
task.setAttribute('data-token', token);
task.innerHTML = `
<p class="task__text" contenteditable="true">${data.text}</p>
<input type="checkbox" ${data.input == 'true' ? 'checked' : ''}>
`;
return task;
}
Опишем события для кнопки и для редактирования задачи: const btnAddTask = document.querySelector('.
task__add-btn');
btnAddTask.addEventListener('click', function(e) {
e.preventDefault();
const newToken = randomToken();
tokens.push(newToken);
const taskData = {
text: 'Task`s title',
input: false
};
root.appendChild(getTemplate(newToken, taskData));
updateTokens();
updateEvent(newToken);
});
Давайте реализуем недостающие функции updateEvent и randomToken. function updateEvent(token) {
const task = root.querySelector(`[data-token="${token}"]`);
const text = task.querySelector(`.
task__text`); const input = task.querySelector(`input`); localStorage.setItem(`text-${token}`, text.innerHTML); localStorage.setItem(`input-${token}`, input.checked); text.addEventListener('input', function() { localStorage.setItem(`text-${token}`, text.innerHTML); }); input.addEventListener('click', function() { localStorage.setItem(`input-${token}`, input.checked); }); } function updateTokens() { localStorage.setItem('tokens', tokens.join(', ')); } function randomToken() { return Math.random().
toString(36).
substring(2, 15) + Math.random().
toString(36).
substring(2, 15);
}
Большой! Мы реализовали добавление задач и сохранение их в localStorage. Остается только вывести уже сохраненные задачи.
Отображение сохраненных задач
Для отображения задач достаточно получить все ключи, проанализировать их и извлечь для каждого ключа текст задачи и ее статус.Далее мы просто создаем каждую задачу в корне: получаем задачу с помощью getTemplate и вставляем ее в корень.
tokens.forEach(function(token) {
const text = localStorage.getItem(`text-${token}`);
const input = localStorage.getItem(`input-${token}`);
root.appendChild(getTemplate(token, {
text: text,
input: input
}));
updateEvent(token);
});
В общем, наш простейший диспетчер задач готов.
Остается только собрать все воедино.
Менеджер рабочих задач доступен здесь .
Теги: #JavaScript #localstorage
-
Как Оценивать Большие Задачи
19 Oct, 24 -
Чернобыль Часть 13. Тернистый Путь К Истине
19 Oct, 24 -
Одинокий Лось
19 Oct, 24
