为何Todo列表仅在LocalStorage可见，页面需刷新才显示？

问题根源 #

你的代码只完成了数据层（LocalStorage）的同步，但没有同步更新视图层（DOM），同时全局tasks数组是页面初始化时读取的静态数据，后续操作未同步更新该数组，导致视图与数据脱节，必须刷新页面才能重新读取数据渲染视图。

具体问题点：

• 添加Todo：仅将新任务存入LocalStorage，但未将对应的DOM元素插入页面的<ol>容器。
• 删除Todo：仅更新LocalStorage数据，但未从页面移除目标<li>元素，且全局tasks数组仍保留旧数据，后续操作会基于错误数据执行。

解决方案 #

通过封装统一的渲染函数，在数据更新后重新渲染视图，就能实现实时同步。以下是优化后的完整代码：

优化后的JavaScript代码 #

const form = document.querySelector('form');
const input = document.querySelector('.inp');
const todoList = document.querySelector('ol');

// 封装渲染Todo列表的函数
function renderTodos() {
    // 清空现有列表，避免重复渲染
    todoList.innerHTML = '';
    // 从LocalStorage读取最新数据，空值时默认空数组
    const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    // 遍历渲染每个Todo项
    tasks.forEach((task, index) => {
        const li = document.createElement('li');
        li.innerHTML = `${task} <button onclick='del(${index})' class='btn'>X</button>`;
        todoList.appendChild(li);
    });
}

// 添加Todo逻辑
const addToDo = (e) => {
    e.preventDefault();
    const inputValue = input.value.trim();
    if (!inputValue) return; // 过滤空输入

    // 读取现有任务
    let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    // 添加新任务
    tasks.push(inputValue);
    // 更新LocalStorage
    localStorage.setItem('tasks', JSON.stringify(tasks));
    // 清空输入框
    input.value = '';
    // 重新渲染视图
    renderTodos();
};

// 删除Todo逻辑
const del = (index) => {
    // 读取最新任务数据
    let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    // 过滤掉要删除的项
    tasks = tasks.filter((_, i) => i !== index);
    // 更新LocalStorage
    localStorage.setItem('tasks', JSON.stringify(tasks));
    // 重新渲染视图
    renderTodos();
};

// 页面加载时初始化渲染
form.addEventListener('submit', addToDo);
renderTodos();

对应的HTML代码（无需修改） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form action="">
        <input type="text" class="inp">
        <button>Add todo</button>
    </form>
    <ol>
    </ol>
    <script src="script.js"></script>
</body>
</html>

关键优化点 #

1. 封装renderTodos函数：统一负责从LocalStorage读取最新数据并渲染DOM，避免重复代码，保证视图始终和数据一致。
2. 操作后立即渲染：添加或删除Todo后，调用renderTodos()直接更新页面，无需刷新。
3. 空值校验：添加Todo时过滤空输入，避免无效任务。
4. 语义化遍历：用forEach替代map渲染DOM，语义更清晰（map用于生成新数组，而非遍历执行DOM操作）。

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