页面重载后本地存储的待办项丢失CSS样式与JS交互性问题求助

你当前的代码只存储了待办项的纯文本内容（listContainer.textContent），丢失了所有HTML结构信息——包括<li>的checked类（对应完成样式）、<span>删除按钮，所以页面重载后只有纯文本，没有样式和交互元素。同时事件监听虽然是委托在父元素上，但没有对应的DOM元素，自然也触发不了交互。

只需要修改saveData和showTask函数，用innerHTML代替textContent，保存/还原完整的HTML结构：

// 保存完整的HTML结构
function saveData() {
    localStorage.setItem("data", listContainer.innerHTML);
}

// 还原HTML结构，为空时设默认空字符串
function showTask() {
    listContainer.innerHTML = localStorage.getItem("data") || "";
}

这样页面重载后，会完整还原带checked类的<li>和<span>删除按钮，而你之前绑定在listContainer上的事件委托依然有效（因为事件监听是父元素监听子元素点击，不管子元素是动态创建还是从localStorage还原的）。

如果需要更安全、易维护的方式，建议将任务数据以JSON数组形式存储，每个任务包含内容和完成状态，避免直接操作HTML的风险：

修改后的完整JS代码： #

const inputBox = document.getElementById("input-box");
const listContainer = document.getElementById("list-container");

// 从localStorage加载任务，没有则初始化空数组
let tasks = JSON.parse(localStorage.getItem("tasks")) || [];

function addTask() {
    if(inputBox.value === '') {
        alert("Write something!");
    } else {
        // 添加新任务到数组
        tasks.push({
            content: inputBox.value,
            isChecked: false
        });
        inputBox.value = "";
        renderTasks(); // 重新渲染任务
    }
}

// 渲染所有任务到页面
function renderTasks() {
    listContainer.innerHTML = ""; // 清空现有内容
    tasks.forEach(task => {
        let li = document.createElement("li");
        li.textContent = task.content;
        // 如果任务已完成，添加checked类
        if(task.isChecked) {
            li.classList.add("checked");
        }
        // 创建删除按钮
        let remove = document.createElement("span");
        remove.textContent = "\u00d7";
        li.appendChild(remove);
        listContainer.appendChild(li);
    });
    saveData(); // 保存到localStorage
}

// 点击事件处理
listContainer.addEventListener("click", function (e) {
    if (e.target.tagName === "LI") {
        // 找到当前点击的li对应的任务索引
        const taskIndex = Array.from(listContainer.children).indexOf(e.target);
        // 切换完成状态
        tasks[taskIndex].isChecked = !tasks[taskIndex].isChecked;
        renderTasks();
    } else if (e.target.tagName === "SPAN") {
        // 找到要删除的任务索引
        const taskIndex = Array.from(listContainer.children).indexOf(e.target.parentElement);
        // 删除任务
        tasks.splice(taskIndex, 1);
        renderTasks();
    }
}, false);

// 保存任务数据到localStorage
function saveData() {
    localStorage.setItem("tasks", JSON.stringify(tasks));
}

// 页面加载时渲染任务
renderTasks();

方案优势： #

• 数据与视图分离，更容易扩展功能（比如编辑任务、分类等）
• 避免innerHTML可能带来的XSS风险（比如用户输入HTML标签时，textContent会原样显示，不会解析）
• 任务状态（是否完成）以明确的字段存储，逻辑更清晰

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