

LocalStorage сохраняет значение пустым
Я создаю ООП ToDo приложение.Когда я сохраняю задачи в localStorage они записываются как пустой объект.Можете объяснить из-за чего возникает данная проблема и как её решить?
class TaskManager {
#tasks = [];
constructor() {
this.#tasks = this.loadTasksFromLocalStorage(); // Загрузижение задач из localStorage
this.renderTasks(); // Перерисовывание задач на странице
console.log(this.loadTasksFromLocalStorage());
}
// Метод для загрузки задач из localStorage
loadTasksFromLocalStorage() {
const storedTasks = localStorage.getItem('TASKS');
return JSON.parse(storedTasks) || [];
}
// Метод для сохранения задач в localStorage
saveTasksToLocalStorage() {
localStorage.setItem('TASKS', JSON.stringify(this.#tasks));
}
addTask(task) {
this.#tasks.push(task);
// После добавления задачи, сохраняем обновленный список в localStorage
this.saveTasksToLocalStorage();
}
filterByInProgress() {
return this.#tasks.filter(task => task.getCompletionStatus() === 'in-progress');
}
filterByDone() {
return this.#tasks.filter(task => task.getCompletionStatus() === 'done');
}
sortByName() {
this.#tasks.sort((a, b) => {
const nameA = a.name.toLowerCase();
const nameB = b.name.toLowerCase();
if (nameA < nameB) return -1;
if (nameA > nameB) return 1;
return 0;
});
}
sortByDate() {
this.#tasks.sort((a, b) => b.getCreationDate() - a.getCreationDate());
}
renderTasks() {
const tasksContainer = document.querySelector('#taskList');
tasksContainer.innerHTML = '';
this.#tasks.forEach((taskData) => { // taskData вместо task
// экземпляр класса Task на основе данных из localStorage
const task = new Task(taskData.title, taskData.description, taskData.completionStatus);
const taskElement = task.createTaskElement();
tasksContainer.appendChild(taskElement);
});
}
}
const taskManager = new TaskManager();
document.querySelector('#taskAddButton').addEventListener('click', () => {
const taskTitleInput = document.querySelector('#taskTitle');
const taskDescriptionInput = document.querySelector('#taskDescription');
const taskTitle = taskTitleInput.value;
const taskDescription = taskDescriptionInput.value;
if (!taskTitle || !taskDescription) {
alert('Задача не может быть добавлена. Пожалуйста, заполните название и описание задачи.');
} else {
const newTask = new Task(taskTitle, taskDescription);
taskManager.addTask(newTask);
// Очищаем поля ввода
taskTitleInput.value = '';
taskDescriptionInput.value = '';
taskManager.renderTasks();
}
});
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault(); // Предотвращаем отправку формы
});
Проблема заключается в том, что объекты не могут быть сохранены в localStorage напрямую. Для сохранения объекта в localStorage его нужно преобразовать в строку с помощью метода JSON.stringify(), а затем при извлечении из хранилища преобразовывать строку обратно в объект с помощью метода JSON.parse(). В данном случае, возможно, проблема заключается в том, что при сохранении задач в localStorage используется объект, который не был преобразован в строку. Для решения проблемы нужно преобразовать объект в строку с помощью метода JSON.stringify() перед сохранением в localStorage. Например, в методе saveTasksToLocalStorage() нужно заменить строку "localStorage.setItem('TASKS', this.#tasks);" на "localStorage.setItem('TASKS', JSON.stringify(this.#tasks));". При извлечении из хранилища нужно преобразовывать строку обратно в объект с помощью метода JSON.parse(). Например, в методе loadTasksFromLocalStorage() нужно заменить строку "return localStorage.getItem('TASKS');" на "return JSON.parse(localStorage.getItem('TASKS')) || [];".