页面刷新后无法从localStorage恢复Todo列表，求修复方案

问题根源 #

你当前的代码只完成了将Todo数据存入localStorage和手动添加Todo到页面的操作，但缺少三个关键逻辑：

• 页面加载时，没有从localStorage读取已保存的数据并渲染到页面
• 现有代码中读取localStorage的语句JSON.parse(localStorage.getItem('saved'))没有把结果赋值给listCount数组，等于白执行
• 单个Todo的删除操作只移除了DOM元素，但没同步更新listCount数组，导致保存时会包含已删除的项

最简单的修改步骤 #

1. 初始化数组时读取本地存储：把listCount的初始值改成从localStorage读取的结果，没有数据则用空数组
2. 添加渲染函数：写一个函数负责把数组中的每一项转换成页面上的Todo元素（带删除按钮），页面加载时调用这个函数
3. 同步删除操作到数组：修改单个删除按钮的逻辑，删除DOM元素的同时从listCount中移除对应项

修改后的完整代码 #

'use strict';

//assigned all btns to a variable
const addbtn = document.querySelector('.addbtn');
const clearbtn = document.querySelector('.clearbtn');
const saveList = document.querySelector('.save');

// 1. 初始化时从localStorage读取数据，没有则用空数组
let listCount = JSON.parse(localStorage.getItem('saved')) || [];

// 2. 添加渲染函数：把数组内容渲染到页面
function renderTodos() {
  const ulList = document.getElementById('list');
  // 先清空现有内容，避免重复渲染
  ulList.innerHTML = '';
  
  listCount.forEach((todoText, index) => {
    const addList = document.createElement('LI');
    addList.textContent = todoText;
    addList.className = 'list-text';
    
    // 创建单个删除按钮
    const deleteSingle = document.createElement('button');
    deleteSingle.setAttribute('class', 'btn button');
    deleteSingle.textContent = 'Delete';
    
    // 3. 同步删除操作到数组
    deleteSingle.addEventListener('click', function() {
      this.parentNode.remove();
      // 从数组中移除对应项
      listCount.splice(index, 1);
    });
    
    addList.appendChild(deleteSingle);
    ulList.appendChild(addList);
  });
}

// 页面加载时调用渲染函数，显示已保存的Todo
renderTodos();

//SAVE
saveList.addEventListener('click', function() {
  localStorage.setItem('saved', JSON.stringify(listCount));
  alert(localStorage.getItem('saved'));
  location.reload();
});

//DELETEALL BUTTON
const deleteAll = function() {
  const ulList = document.getElementById('list');
  ulList.innerHTML = '';
  // 同步清空数组
  listCount = [];
};

//EVENTLISTENER
clearbtn.addEventListener('click', deleteAll);

// ADDING FUNCTION
addbtn.addEventListener('click', function() {
  const textBoxValue = document.querySelector('.text-box');
  const value = textBoxValue.value;

  if (value === '') {
    alert('Please add a chore');
  } else {
    listCount.push(value);
    // 添加新项后重新渲染页面
    renderTodos();
    textBoxValue.value = '';
  }
});

修改说明 #

• 把listCount的初始化改成JSON.parse(localStorage.getItem('saved')) || []，确保页面加载时能拿到之前保存的数据
• 新增renderTodos函数，统一处理Todo项的渲染逻辑，避免重复代码
• 删除单个Todo时，用splice(index, 1)同步更新listCount数组
• 清空所有Todo时，同步清空listCount数组
• 添加新Todo后调用renderTodos，避免重复写DOM创建代码

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