TodoList适配本地存储后出现多函数调用错误求助

开发Todo List任务管理器时，原本运行正常，适配本地存储后所有函数突然无法识别，无法定位原因。

本地存储设置代码 #

manager = new TaskManager();
manager.addTask("Portfolio project");
localStorage.setItem("userManager", JSON.stringify(manager));

TaskManager类用于创建Task类型数组，定义在项目其他文件中

添加任务函数代码 #

function addNewTask() {     
  alert("hello");     
  let description = (document.getElementById("description") as HTMLInputElement).value;    
  manager.push(new Task(description))       
  (document.getElementById("description") as HTMLInputElement).value = "";    
  showTasksInLists();
}

预期该函数能向任务数组添加新任务，但无法正常工作，出现以下错误：

报错信息 #

• 错误1：

main.js:43 Uncaught TypeError: manager.push(...) is not a function
    at addNewTask (main.js:43:40)
    at HTMLButtonElement.onclick (index.html:32:64)

• 错误2：

index.html:49 Uncaught ReferenceError: updateDescription is not defined
    at HTMLButtonElement.onclick (index.html:49:39)

• 错误3：

main.js:22 Uncaught TypeError: manager.findIndex is not a function
    at completeTask (main.js:22:33)

问题分析与解决 #

1. 核心原因：JSON序列化丢失类方法
   JSON.stringify(manager)仅会保留对象的属性数据，TaskManager类的原型方法（如数组操作方法、自定义addTask）会被完全丢弃。从localStorage取出的是普通对象，而非TaskManager实例，因此调用push、findIndex等方法会报错。

2. 修正存储与恢复逻辑

• 存储时仅保存任务数据，而非整个实例：

// 假设TaskManager内部有tasks数组属性
localStorage.setItem("userTasks", JSON.stringify(manager.tasks));

• 恢复时重新创建实例并导入数据：

const savedTasks = JSON.parse(localStorage.getItem("userTasks") || "[]");
manager = new TaskManager();
savedTasks.forEach(taskData => {
  manager.addTask(new Task(taskData.description));
});

3. 修复addNewTask方法
   原代码中直接调用manager.push错误，需使用TaskManager类提供的addTask方法：

// 替换manager.push(...)为
manager.addTask(new Task(description));

4. 解决updateDescription未定义问题
   确保该函数定义在全局作用域，或改用addEventListener绑定点击事件（避免内联onclick），同时检查脚本加载顺序，保证函数定义在调用之前。

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