Вопрос о целесообразности хранения излишков в локальном хранилище зависит от ваших конкретных требований и задач. В общем случае, использование localStorage в JavaScript для хранения данных может быть полезно, особенно если вам нужно сохранить данные долгосрочно или обновлять их в реальном времени.
Ниже приведен пример создания простого чеклиста с использованием JavaScript и localStorage:
index.html:
```html
<!DOCTYPE html>
<html>
<head>
<title>Checklist</title>
</head>
<body>
<h1>Checklist</h1>
<!-- Форма для добавления дела -->
<form id="addForm">
<input type="text" id="taskInput" placeholder="Введите задачу" required>
<button type="submit">Добавить</button>
</form>
<!-- Список дел -->
<ul id="taskList"></ul>
<script src="script.js"></script>
</body>
</html>
```
script.js:
```javascript
// Получаем ссылку на элементы формы и списка
const addForm = document.getElementById('addForm');
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');
// Загружаем уже сохраненные задачи при загрузке страницы
window.addEventListener('load', () => {
loadTasks();
});
// Отправляем задачу при отправке формы
addForm.addEventListener('submit', (e) => {
e.preventDefault(); // Предотвращаем отправку формы
const taskText = taskInput.value;
if (taskText) {
addTask(taskText); // Добавляем задачу
taskInput.value = ''; // Очищаем поле ввода
}
});
// Функция добавления задачи
function addTask(taskText) {
const task = document.createElement('li');
task.innerHTML = taskText;
// Добавляем кнопки удаления и отметки выполнения
const deleteButton = document.createElement('button');
deleteButton.innerHTML = 'Удалить';
deleteButton.addEventListener('click', () => {
deleteTask(task);
});
const doneButton = document.createElement('button');
doneButton.innerHTML = 'Готово';
doneButton.addEventListener('click', () => {
toggleDone(task);
});
task.appendChild(deleteButton);
task.appendChild(doneButton);
taskList.appendChild(task);
saveTasks(); // Сохраняем задачи в localStorage
}
// Функция удаления задачи
function deleteTask(task) {
task.remove();
saveTasks(); // Сохраняем задачи в localStorage после удаления
}
// Функция отметки задачи выполненной
function toggleDone(task) {
task.classList.toggle('done');
saveTasks(); // Сохраняем задачи в localStorage после изменения
}
// Функция сохранения задач в localStorage
function saveTasks() {
const tasks = [];
const taskElements = taskList.getElementsByTagName('li');
for (let i = 0; i < taskElements.length; i++) {
const task = taskElements[i].innerHTML;
tasks.push(task);
}
localStorage.setItem('tasks', JSON.stringify(tasks));
}
// Функция загрузки задач из localStorage
function loadTasks() {
const tasks = JSON.parse(localStorage.getItem('tasks'));
if (tasks && tasks.length) {
tasks.forEach((task) => {
addTask(task);
});
}
}
```
В этом примере приложение чеклиста сохраняет задачи в localStorage, используя JSON-преобразование для преобразования их в строку перед сохранением и обратно после загрузки. Функции addTask, deleteTask и toggleDone добавляют, удаляют и отмечают задачи задачи в списке соответственно, а функции saveTasks и loadTasks сохраняют и загружают задачи из localStorage соответственно.