无法从localStorage获取数据：TodoList数据回显代码位置咨询

核心问题 #

你现在的代码只实现了添加todo时存入localStorage，但没有在页面加载时从localStorage读取已保存的数据，所以todoItems始终是空数组，自然拿不到之前存的数据。

正确的代码放置位置 #

获取数据的代码要放在脚本最开始、页面加载完成后的初始化阶段，具体要做这几件事：

• 读取localStorage中的todos数据，解析成JS数组
• 如果本地没有数据（首次打开网站），就保持todoItems为空数组
• 遍历读取到的todo数组，调用renderTodo把每个todo渲染到页面上

修改后的完整代码示例 #

// 页面初始化时先读取localStorage的数据
let todoItems = JSON.parse(window.localStorage.getItem('todos')) || [];

// 页面DOM加载完成后，渲染已保存的所有todo
document.addEventListener('DOMContentLoaded', function() {
  todoItems.forEach(todo => renderTodo(todo));
});

function addTodo(text) {
    const todo = {
        text,
        checked: false,
        id: Date.now()
    };
    todoItems.push(todo);
    console.log(todoItems);
    renderTodo(todo);
    // 新增todo后更新localStorage
    window.localStorage.setItem('todos', JSON.stringify(todoItems));
}

// 补充完整的renderTodo函数（你之前的代码片段里该函数不完整）
function renderTodo(todo) {
    // 假设你的todo列表容器类名为todos-list，根据实际情况调整
    const list = document.querySelector('.todos-list');
    const node = document.createElement('li');
    node.innerHTML = `
        <label>
            <input type="checkbox" ${todo.checked ? 'checked' : ''} />
            <div class="todos-list__li-text">
                <div class="todos-list__li-text-1">${todo.text}</div>
                <svg class="todos-list__li-text-2" width="170" height="4" viewBox="0 0 194 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path id="line" d="M0 2L194 2" stroke="url(#paint0_linear)" stroke-width="3.2"/>
                    <defs>
                        <linearGradient id="paint0_linear" x1="194" y1="2.00012" x2="0" y2="2.00003" gradientUnits="userSpaceOnUse">
                            <stop stop-color="#7DCEE8"/>
                            <stop offset="1" stop-color="#30BDEA"/>
                        </linearGradient>
                    </defs>
                </svg>
            </div> 
            <button class="todos-list__li-delete-todo "><i class="fa fa-trash"></i></button>
        </label>
    `;
    console.log(node);
    list.append(node);
}

关键细节说明 #

• JSON.parse(window.localStorage.getItem('todos')) || []：如果localStorage里没有todos，getItem会返回null，JSON.parse(null)结果是null，用|| []兜底成空数组，避免代码报错。
• DOMContentLoaded事件：确保页面DOM元素加载完成后再渲染todo，不然会找不到列表容器元素。
• 后续如果添加删除、勾选状态切换的功能，每次修改todoItems后，都要调用setItem更新localStorage，保持数据同步。

内容的提问来源于stack exchange，提问作者سعود