Top.Mail.Ru
Ответы
Аватар пользователя
Аватар пользователя
Аватар пользователя
Программирование
+1

LocalStorage сохраняет значение пустым

Я создаю ООП ToDo приложение.Когда я сохраняю задачи в localStorage они записываются как пустой объект.Можете объяснить из-за чего возникает данная проблема и как её решить?

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
     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')) || [];".