如何在localStorage中保存待办事项列表，并确保刷新页面后未完成的待办事项仍保留在页面上

// 从localStorage中获取待办事项列表
function getTodoList() {
  const todoList = localStorage.getItem('todoList');
  if (todoList) {
    return JSON.parse(todoList);
  } else {
    return [];
  }
}

// 将待办事项列表保存到localStorage中
function saveTodoList(todoList) {
  localStorage.setItem('todoList', JSON.stringify(todoList));
}

// 添加待办事项
function addTodoItem(item) {
  const todoList = getTodoList();
  todoList.push(item);
  saveTodoList(todoList);
}

// 完成待办事项
function completeTodoItem(index) {
  const todoList = getTodoList();
  todoList[index].completed = true;
  saveTodoList(todoList);
}

// 删除待办事项
function deleteTodoItem(index) {
  const todoList = getTodoList();
  todoList.splice(index, 1);
  saveTodoList(todoList);
}

// 示例用法
const todoList = getTodoList();
console.log(todoList); // 输出当前待办事项列表

addTodoItem({ task: '完成项目报告', completed: false });
console.log(getTodoList()); // 输出更新后的待办事项列表

completeTodoItem(0);
console.log(getTodoList()); // 输出更新后的待办事项列表

deleteTodoItem(0);
console.log(getTodoList()); // 输出更新后的待办事项列表