如何实现To-Do待办应用刷新/关窗后任务内容不丢失

你不需要用MongoDB实现这个纯前端场景的持久化，直接用浏览器自带的localStorage配合数组存储即可，数据保存在用户本地浏览器中，无需后端服务，实现逻辑非常简单：

• 页面初始化时，从localStorage读取之前保存的任务数组，没有历史数据则初始化为空数组，同时同步任务计数，避免12条任务的上限规则失效
• 封装统一的任务渲染函数，初始化加载历史任务、新增任务时都调用该函数生成DOM元素，减少重复代码
• 每次新增任务、修改任务勾选状态时，先更新内存中的任务数组，再将数组序列化为JSON字符串存入localStorage
• 修复原代码中重复给元素设置相同id的问题：id是页面全局唯一标识，多任务场景下重复id会导致样式、事件绑定异常，把任务项、复选框的id选择器改为class选择器即可。

修改后完整代码 #

JavaScript（ToDo.js） #

let div = document.getElementById('tasks');
let add = document.getElementById('add');
let newTask = document.getElementById('newTask');
// 读取本地存储的历史任务，无数据时初始化为空数组
let taskList = JSON.parse(localStorage.getItem('todoTasks')) || [];
let c = taskList.length;

// 单条任务渲染逻辑
function renderTask(taskText, isChecked = false) {
    let cbox = document.createElement("input");
    let d = document.createElement("div");
    
    cbox.type = "checkbox";
    cbox.className = "check";
    cbox.checked = isChecked;

    d.className = "nd";
    d.append(cbox);
    d.append(taskText);
    div.append(d);

    // 同步勾选状态到本地存储
    cbox.addEventListener("change", () => {
        const taskIndex = Array.from(div.children).indexOf(d);
        taskList[taskIndex].checked = cbox.checked;
        localStorage.setItem('todoTasks', JSON.stringify(taskList));
    })
}

// 页面初始化加载历史任务
function initLoad() {
    div.innerHTML = '';
    taskList.forEach(task => {
        renderTask(task.text, task.checked);
    });
    // 初始化时校验任务数上限
    if (c >= 12) {
        add.disabled = true;
        newTask.value = "Stack Overflow";
    }
}

initLoad();

add.addEventListener("click", function () {
    let newt = newTask.value.trim();
    if (!newt) return; // 过滤空任务
    newTask.value = null;

    // 新任务写入数组并同步到本地存储
    taskList.push({
        text: newt,
        checked: false
    });
    localStorage.setItem('todoTasks', JSON.stringify(taskList));
    renderTask(newt);
    
    c += 1;

    if (c === 12) {
        add.disabled = true;
        newTask.value = "Stack Overflow";
    }
});

CSS（ToDo.css） #

原代码其余样式保持不变，仅把针对重复id的选择器改为class选择器即可：

.nd {
    font-size: 20px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.check {
    margin-left: 20px;
    height: 15px;
    width: 15px;
    margin-right: 10px;
}

HTML部分 #

原HTML代码不需要修改，保持原有结构即可正常运行。

该方案下，只要用户不手动清除浏览器站点数据，刷新页面、关闭浏览器后重新打开，任务内容和勾选状态都会完整保留。如果后续需要多端同步任务、跨设备访问的能力，再考虑接入MongoDB等服务端存储方案即可。

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