开发ToDo项目时提交表单后Local Storage属性丢失问题求助
问题:Local Storage中项目描述刷新后丢失
开发基于Local Storage的ToDo项目时,遇到数据丢失问题:更新项目的name和description属性后,页面刷新前通过console.log(localStorage)能看到数据已存储,但刷新页面后,name属性正常保留,description属性却消失了。更新操作到页面刷新之间没有执行其他代码。
相关代码如下:
编辑项目头部函数
// 编辑项目头部函数 function _editProjectHeader() { addProjectContainer.style.visibility = 'visible'; projectNameContainer.value = _getActiveProject().getName(); projectDescriptionContainer.value = _getActiveProject().getDescription(); addProjectBtnSmallWindow.addEventListener('click', () => { _getActiveProject().setName(projectNameContainer.value); // 正常工作 _getActiveProject().setDescription(projectDescriptionContainer.value); // 页面刷新前正常 console.log(projectList); console.log(localStorage); // 此时Local Storage中已有数据 }) }
获取活跃项目函数
// 获取活跃项目函数 function _getActiveProject() { const amountOfProjects = Object.keys(projectList).length; for (let i = 0; i <= amountOfProjects; i++) { if (projectList.getSingleProjects(i).isActive() == true) { return projectList.getSingleProjects(i) } } }
Projects类代码
import { toDate, isToday, isThisWeek, subDays } from 'date-fns' import { projectList } from '../index'; export class Projects { constructor(name) { this.name = name; this.tasks = {}; this.active = false; this.description = ''; } setName(name) { this.name = name; projectList.safeToProjectList(this); } setActiveTrue() { this.active = true; projectList.safeToProjectList(this); } isActive() { return this.active ? true : false; } getName() { return this.name; } setDescription(decription) { this.description = decription; projectList.safeToProjectList(this); } getDescription() { return this.description; } addTaskToList(task) { this.tasks[task.name] = task; } getTasks() { return this.tasks; } getTasksToday() { return this.tasks.filter((task) => { const taskDate = new Date(task.getDateFormatted()) return isToday(toDate(taskDate)) }) } getTasksThisWeek() { return this.tasks.filter((task) => { const taskDate = new Date(task.getDateFormatted()) return isThisWeek(subDays(toDate(taskDate), 1)) }) } updateLocalStorage() { } }
ProjectList类代码
import { Projects } from "./project"; import { Tasks } from "./tasks"; export class ProjectList { constructor() { if (localStorage.getItem('list') != null) { this.projectList = JSON.parse(localStorage.getItem('list')); console.log('loading existing data'); } else { this.projectList = {}; localStorage.setItem('list', JSON.stringify(projectList)); console.log('setting new data'); } } safeToProjectList(project) { this.projectList[project.getName()] = project; localStorage.setItem('list', JSON.stringify(this.projectList)); } deleteProjectFromList(project) { delete this.projectList[project] localStorage.setItem('list', JSON.stringify(this.projectList)) } loadProjectList() { this.projectList = JSON.parse(localStorage.getItem('list')) } updateTodayTasks() { const today = new Projects('inbox'); const amountOfProjects = Object.keys(this.projectList).length - 1; for (let i = 0; i <= amountOfProjects; i++) { const tasks = [Object.values(this.projectList)[i]][0].getTasksToday() if (tasks.length > 0) { today.addTaskToList(tasks); } } return today; } updateWeekTasks() { const thisWeek = new Projects('thisWeek'); const amountOfProjects = Object.keys(this.projectList).length - 1; for (let i = 0; i <= amountOfProjects; i++) { const tasks = [Object.values(this.projectList)[i]][0].getTasksThisWeek() if (tasks.length > 0) { thisWeek.addTaskToList(tasks); } } return thisWeek; } updateInboxTasks() { const inbox = new Projects('thisWeek'); const amountOfProjects = Object.keys(this.projectList).length - 1; for (let i = 0; i <= amountOfProjects; i++) { const tasks = [Object.values(this.projectList)[i]][0].getTasks(); if (tasks.length > 0) { inbox.addTaskToList(tasks); } } return inbox; } getNameFromProjects() { const nameArray = []; const amountOfProjects = Object.keys(this.projectList).length - 1; for (let i = 0; i <= amountOfProjects; i++) { const name = [Object.values(this.projectList)[i]][0].getName(); nameArray.push(name); } return nameArray } setProjectsActiveFalse() { const amountOfProjects = Object.keys(this.projectList).length - 1; for (let i = 0; i <= amountOfProjects; i++) { [Object.values(this.projectList)[i]][0].active = false; } //Local storage this.safeCurrentProject(); } getSingleProjects(i) { //Build here new Project let project = new Projects([Object.values(this.projectList)[i]][0].name); //Set active bool if ([Object.values(this.projectList)[i]][0].active == true) { project.setActiveTrue(); }; //Add description project.setDescription([Object.values(this.projectList)[i]][0].description); //Add tasks const tasks = [Object.values(this.projectList)[i]][0].tasks; const newTasks = Object.values(tasks).length - 1 if (newTasks > 0) { // const amountOfProjects = Object.keys(this.projectList).length - 1; for (let x = 0; x <= newTasks; x++) { //Filter data from tasks //Add new task const taskName = [Object.values(tasks)[x]][0].name; const taskDate = [Object.values(tasks)[x]][0].dueDate; const taskPriority = [Object.values(tasks)[x]][0].priority; const taskProject = [Object.values(tasks)[x]][0].project; const taskComplete = [Object.values(tasks)[x]][0].complete; const task = new Tasks(taskName, taskDate, taskPriority, taskProject, taskComplete); project.addTaskToList(task); } } return project; } safeCurrentProject() { localStorage.setItem('list', JSON.stringify(this.projectList)); } }
恳请帮忙排查此问题,谢谢!
内容的提问来源于stack exchange,提问作者Sandy
相关产品推荐
相关产品推荐

