页面刷新时如何恢复localStorage中存储的待办列表数据

待办列表刷新恢复localStorage数据的实现方案 #

你需要补充页面初始化读取存储数据渲染、删除操作同步更新存储的逻辑，修改后的完整代码如下：

let inputField = document.querySelector('#inputField');
let submitBtn = document.querySelector('#submit-btn');
let toDoList = document.querySelector('#toDoList');

// 通用待办项渲染方法，避免新增和初始化逻辑重复
function renderTodoItem(content) {
  let newLi = document.createElement('li');
  newLi.className = 'toDoItems';
  newLi.textContent = content;
  toDoList.appendChild(newLi);
}

// 页面初始化加载localStorage里的所有待办项
function initTodos() {
  for (let i = 0; i < localStorage.length; i++) {
    const todoKey = localStorage.key(i);
    renderTodoItem(todoKey);
  }
}

// DOM加载完成后执行初始化
document.addEventListener('DOMContentLoaded', initTodos);

submitBtn.addEventListener('click', function(event){
  event.preventDefault();
  const content = inputField.value.trim();
  // 空内容校验，避免存储无效待办
  if (!content) return;
  renderTodoItem(content);
  localStorage.setItem(content, content);
  inputField.value = "";
});

toDoList.addEventListener('click', function(e){
  // 避免误删列表内其他元素
  if (e.target.classList.contains('toDoItems')) {
    const content = e.target.textContent;
    // 删除页面元素同时同步移除localStorage存储
    localStorage.removeItem(content);
    e.target.remove();
  }
});

优化建议 #

你当前的存储逻辑是用待办内容同时作为localStorage的key和value，如果出现两个完全相同的待办项，会出现存储覆盖、删除异常的问题，建议将所有待办项存入数组后序列化存储，优化后的核心逻辑如下：

const TODO_STORAGE_KEY = 'user_todo_list';

// 读取存储的待办数组
function getTodoList() {
  return JSON.parse(localStorage.getItem(TODO_STORAGE_KEY) || '[]');
}

// 保存待办数组到存储
function saveTodoList(list) {
  localStorage.setItem(TODO_STORAGE_KEY, JSON.stringify(list));
}

// 初始化逻辑调整为读取数组渲染
function initTodos() {
  getTodoList().forEach(item => renderTodoItem(item));
}

// 新增待办逻辑调整
submitBtn.addEventListener('click', function(event){
  event.preventDefault();
  const content = inputField.value.trim();
  if (!content) return;
  const todoList = getTodoList();
  todoList.push(content);
  saveTodoList(todoList);
  renderTodoItem(content);
  inputField.value = "";
});

// 删除待办逻辑调整
toDoList.addEventListener('click', function(e){
  if (e.target.classList.contains('toDoItems')) {
    const content = e.target.textContent;
    const todoList = getTodoList();
    // 找到第一个匹配的待办项删除
    const targetIndex = todoList.findIndex(item => item === content);
    if (targetIndex > -1) {
      todoList.splice(targetIndex, 1);
      saveTodoList(todoList);
    }
    e.target.remove();
  }
});

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