You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

开发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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.07 13:10:46