更新localStorage用户数据时出现JSON循环对象值异常求助

问题根源：循环引用 #

你的代码里存在循环引用闭环：

• 在Session.addProject()里，创建Project实例时传入了当前Session对象（this），导致每个Project实例都持有对所属Session的引用。
• 同时Session.data数组又存储着这些Project实例。
• 当调用JSON.stringify序列化logOutSession.data时，序列化器会无限遍历Session → data → Project → Session的循环路径，最终抛出"循环对象值"错误。

代码里的具体问题 #

看session.js这段关键代码：

addProject(){
  this.data.push(new Project(this)); // Project实例保存了当前Session的引用
  ++Project.ID;
}

就是这行代码制造了循环引用，让JSON序列化无法完成。

可行解决方案 #

方案1：只序列化纯业务数据（最推荐） #

不要直接序列化带引用的对象，手动提取需要保存的纯数据字段。比如修改登出时的序列化逻辑：

// 在LoginPanel.logOut方法中替换原序列化代码
const cleanData = logOutSession.data.map(project => {
  // 只提取需要存储的纯数据，比如项目ID、名称、待办事项等，排除对Session的引用
  return {
    id: project.ID,
    name: project.name,
    todos: project.todos
    // 其他你需要保存的业务字段
  };
});
localStorage.setItem(id+'-data', JSON.stringify(cleanData));

方案2：移除循环引用 #

修改Project类的设计，不让它持有Session实例的引用。如果Project需要和Session交互，用事件回调替代直接引用：

// 修改Session的addProject方法
addProject(){
  const project = new Project(); // 不再传入this
  // 用事件监听实现Project和Session的交互
  project.addEventListener('projectUpdated', () => {
    // 这里处理Session需要响应的逻辑
  });
  this.data.push(project);
  ++Project.ID;
}

方案3：用replacer函数跳过循环引用（临时救急） #

如果暂时不想改结构，可以给JSON.stringify加一个replacer函数，跳过已遍历过的循环对象：

const seen = new WeakSet();
const serializedData = JSON.stringify(logOutSession.data, (key, value) => {
  if (typeof value === "object" && value !== null) {
    if (seen.has(value)) return;
    seen.add(value);
  }
  return value;
});
localStorage.setItem(id+'-data', serializedData);

注意：这种方式会丢失循环引用部分的数据，只适合临时测试。

额外优化点 #

• Session类里的div是DOM元素，本身无法被JSON序列化，建议把业务数据和DOM操作完全分离，不要在类里存储DOM对象。
• 登出时不需要新建logOutSession实例，直接用传入的data和innerHTML就行，减少冗余操作。

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