如何通过localStorage保存待办事项图标修改，刷新或关闭页面后保留？

核心原因 #

你已经修改了内存中的taskData数组，但没有将更新后的数据持久化到本地存储（比如localStorage），页面刷新后内存数据重置，之前的修改自然就没了。之前调用保存新建任务的函数没生效，大概率是修改taskData后没有立刻触发保存，或者该保存函数的逻辑只处理新增、未覆盖更新场景。

具体解决方案 #

1. 持久化更新后的数据
   在修改taskData里的任务状态后，必须把整个taskData数组重新存入本地存储。如果有现成的保存函数（比如你用来存新建任务的saveTaskData），直接调用即可；如果没有，直接用localStorageAPI实现。

2. 页面初始化时加载持久化数据
   页面打开时，要先从本地存储读取之前保存的taskData，而不是用空数组或硬编码的默认数据，这样刷新后才能恢复之前的任务状态。

修改后的completeTask函数示例 #

function completeTask(event) {
    const todoIcon = event.target;
    todoIcon.classList.add("hidden");

    const text = todoIcon.parentNode.childNodes[2];
    text.classList.add("risked");

    const taskToCompleteId = todoIcon.parentNode.parentNode.id;
    const taskToComplete = document.getElementById(taskToCompleteId);

    taskToComplete.classList.add("done");
    taskToComplete.classList.remove("todo");

    const doneIcon = todoIcon.parentNode.childNodes[1];
    doneIcon.classList.remove("hidden");

    // 精准找到目标任务并更新状态
    const targetTask = taskData.find(item => item.id === taskToCompleteId);
    if (targetTask) {
        targetTask.toDo = false;
        // 关键步骤：持久化更新后的任务数据
        localStorage.setItem('taskData', JSON.stringify(taskData));
        // 如果有现成的保存函数，替换成下面这行
        // saveTaskData();
    }

    counter();
}

额外注意事项 #

• 页面初始化代码要加上：const taskData = JSON.parse(localStorage.getItem('taskData')) || [];，确保加载之前保存的数据
• 任务的id必须唯一且稳定，避免匹配错误导致状态更新失败
• 不要尝试直接保存DOM元素的hidden类状态——DOM状态是临时的，必须通过数据驱动渲染：先保存任务的toDo状态，页面加载时根据这个状态来设置图标的显示/隐藏

内容的提问来源于stack exchange，提问作者joaofelima