如何为JS简易待办列表添加localStorage实现刷新后保留任务

你遇到的核心问题是：只实现了localStorage的写入逻辑，但没在页面加载时读取存储数据并重新渲染任务，同时修改任务状态（完成/删除）时也没同步更新存储的内容。

下面是修改后的完整JS代码，包含所有localStorage相关逻辑：

const STORAGE_KEY = 'todoTasks';
const taskButton = document.getElementById("taskButton");
const taskInput = document.getElementById("taskInput");
const listContainer = document.getElementById("list");

// 页面加载完成后渲染本地存储的任务
document.addEventListener('DOMContentLoaded', renderTasks);

// 添加任务按钮绑定点击事件
taskButton.addEventListener("click", addTask);

// 添加任务函数
function addTask() {
    const inputValue = taskInput.value.trim();
    if (!inputValue) return; // 空输入直接返回，不处理

    // 创建任务数据对象，包含唯一ID、内容和完成状态
    const newTaskData = {
        id: Date.now().toString(), // 用时间戳生成唯一ID
        content: inputValue,
        isCompleted: false
    };

    // 读取现有任务，添加新任务后重新保存
    const tasks = getTasksFromStorage();
    tasks.push(newTaskData);
    saveTasksToStorage(tasks);

    // 渲染单个新任务
    renderSingleTask(newTaskData);
    taskInput.value = ''; // 清空输入框
}

// 渲染所有任务
function renderTasks() {
    const tasks = getTasksFromStorage();
    listContainer.innerHTML = ''; // 清空容器，避免重复渲染
    tasks.forEach(task => renderSingleTask(task));
}

// 渲染单个任务
function renderSingleTask(taskData) {
    // 创建任务元素
    const newTask = document.createElement('p');
    const checkBtn = document.createElement('button');
    const deleteBtn = document.createElement('button');

    // 设置任务内容和完成状态样式
    newTask.textContent = taskData.content;
    if (taskData.isCompleted) {
        newTask.style.textDecoration = "line-through";
    }

    // 给按钮绑定任务ID，方便后续操作关联目标任务
    checkBtn.dataset.taskId = taskData.id;
    deleteBtn.dataset.taskId = taskData.id;

    // 绑定完成任务事件
    checkBtn.addEventListener("click", () => {
        toggleTaskCompletion(taskData.id);
    });

    // 绑定删除任务事件
    deleteBtn.addEventListener("click", () => {
        deleteTask(taskData.id);
    });

    // 将元素添加到容器
    listContainer.appendChild(newTask);
    listContainer.appendChild(checkBtn);
    listContainer.appendChild(deleteBtn);
}

// 切换任务完成状态
function toggleTaskCompletion(taskId) {
    const tasks = getTasksFromStorage();
    const updatedTasks = tasks.map(task => {
        if (task.id === taskId) {
            return {...task, isCompleted: !task.isCompleted};
        }
        return task;
    });
    saveTasksToStorage(updatedTasks);
    renderTasks(); // 重新渲染所有任务
}

// 删除任务
function deleteTask(taskId) {
    const tasks = getTasksFromStorage();
    const updatedTasks = tasks.filter(task => task.id !== taskId);
    saveTasksToStorage(updatedTasks);
    renderTasks(); // 重新渲染所有任务
}

// 从本地存储读取任务
function getTasksFromStorage() {
    const storedTasks = localStorage.getItem(STORAGE_KEY);
    return storedTasks ? JSON.parse(storedTasks) : [];
}

// 将任务保存到本地存储
function saveTasksToStorage(tasks) {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks));
}

关键修改说明： #

• 用STORAGE_KEY统一存储键名，避免拼写错误
• 页面加载时通过DOMContentLoaded事件触发渲染，自动读取localStorage里的任务并显示
• 每个任务用对象存储（包含ID、内容、完成状态），方便跟踪状态变化
• 封装getTasksFromStorage和saveTasksToStorage工具函数，统一处理localStorage的读写逻辑
• 切换完成状态和删除任务时，同步更新localStorage并重新渲染页面
• 给按钮添加data-task-id属性，关联对应任务的唯一ID，确保操作能精准找到目标任务

修改后，页面刷新会自动加载之前保存的任务，添加、完成、删除操作也会同步保存到localStorage，满足刷新后任务保留的需求。

内容的提问来源于stack exchange，提问作者C-Rollot