如何解决通过JSON存储ToDo实例到localStorage时方法丢失的问题？

核心原因 #

JSON序列化仅会保存对象的可枚举属性，类的原型方法（比如deleteItem）不属于可枚举属性范畴，不会被存入localStorage。从localStorage读取后得到的是普通JavaScript对象，而非ToDo类的实例，自然无法调用原型上的方法。

可行解决方案 #

方案1：读取数据后重新构建ToDo实例 #

从localStorage取出待办数组后，遍历每个对象，用ToDo类重新实例化，手动恢复原有属性，让新实例继承类的所有原型方法。

示例代码：

// 从localStorage读取待办数据
const savedTodos = JSON.parse(localStorage.getItem('toDoList')) || [];
// 重新构建ToDo实例数组
const toDoList = savedTodos.map(todoData => {
  const todo = new ToDo(todoData.title, todoData.project, todoData.dueDate, todoData.text);
  // 恢复构造函数未初始化的属性
  todo.done = todoData.done;
  todo.key = todoData.key;
  return todo;
});

处理后toDoList中的每个元素都是完整的ToDo实例，调用deleteItem不会再报错。

方案2：将实例方法改为独立工具函数 #

把依赖实例的方法抽离成独立函数，操作待办数组时直接调用该函数，无需依赖实例方法。

修改后的代码：

// 独立的待办项删除函数
function deleteTodoItem(todoItem, todoList) {
  const index = todoList.indexOf(todoItem);
  if (index !== -1) {
    todoList.splice(index, 1);
    // 同步更新localStorage
    localStorage.setItem('toDoList', JSON.stringify(todoList));
  }
}

// ToDo类移除deleteItem方法
class ToDo {
  static keyCount = JSON.parse(localStorage.getItem("todoCount")) || 0;
  constructor(title, project, dueDate, text) {
    this.title = title;
    this.dueDate = dueDate;
    this.text = text;
    this.done = false;
    this.key = ToDo.keyCount++;
    this.project = project;
  }

  saveCountToLocal() {
    localStorage.setItem("todoCount", JSON.stringify(ToDo.keyCount));
  }
}

按钮绑定事件时直接调用独立函数：

// 示例按钮绑定逻辑
button.addEventListener('click', () => {
  deleteTodoItem(currentTodo, toDoList);
  // 重新渲染页面
  renderTodos();
});

方案3：给ToDo类添加反序列化静态方法 #

在ToDo类内部封装一个静态方法，专门用于将JSON对象转化为ToDo实例，让代码结构更整洁。

示例代码：

class ToDo {
  static keyCount = JSON.parse(localStorage.getItem("todoCount")) || 0;
  constructor(title, project, dueDate, text) {
    this.title = title;
    this.dueDate = dueDate;
    this.text = text;
    this.done = false;
    this.key = ToDo.keyCount++;
    this.project = project;
  }

  saveCountToLocal() {
    localStorage.setItem("todoCount", JSON.stringify(ToDo.keyCount));
  }

  deleteItem(item) {
    toDoList.splice(toDoList.indexOf(item), 1);
  }

  // 新增静态反序列化方法
  static fromJSON(todoData) {
    const todo = new ToDo(todoData.title, todoData.project, todoData.dueDate, todoData.text);
    todo.done = todoData.done;
    todo.key = todoData.key;
    return todo;
  }
}

// 读取数据时调用反序列化方法
const savedTodos = JSON.parse(localStorage.getItem('toDoList')) || [];
const toDoList = savedTodos.map(todo => ToDo.fromJSON(todo));

额外注意事项 #

• 每次修改toDoList后，需重新将数组序列化并存入localStorage，保证数据同步。
• 确保ToDo.keyCount在实例化前就从localStorage加载完成，避免计数重置。

内容的提问来源于stack exchange，提问作者alexandros.c