Angular项目中如何避免LocalStorage存储任务时数据被覆盖

问题原因 #

你当前的addTask()方法每次直接将单个任务对象存入LocalStorage，同一个token key对应的旧值会被新值直接覆盖，自然无法实现列表累加存储。同时你代码中读取LocalStorage的逻辑没有赋值给任务数组，也没有实际生效。

修改方案 #

1. 优化LocalStorage读写逻辑 #

• 将存储key从语义不明的token改为tasks，更易维护
• 组件初始化时读取历史存储的任务列表
• 新增任务时先更新本地任务数组，再将整个数组序列化存入LocalStorage

核心代码修改 #

调整ngOnInit初始化逻辑

ngOnInit() {
  // 初始化加载本地存储的历史任务
  const savedTasks = localStorage.getItem('tasks');
  if (savedTasks) {
    this.tasks = JSON.parse(savedTasks);
  }
}

重写addTask方法

addTask() {
  const el: Result = {
    name: this.activity.name,
    end: this.endTime,
    start: this.startTime,
    length: this.display,
  };
  // 先将新任务加入本地任务数组
  this.tasks.push(el);
  // 将完整任务数组存入LocalStorage
  localStorage.setItem('tasks', JSON.stringify(this.tasks));
  
  this.activity.name = '';
  this.modalboxActive = false;
  this.resetTimer();
}

可选优化：计时显示补零 #

你当前的transform方法输出的分钟、秒数小于10时不会补零，显示效果不统一，可以调整为：

transform(value: number): string {
  const sec_num = value;
  const hours = Math.floor(sec_num / 3600);
  const minutes = Math.floor((sec_num - hours * 3600) / 60);
  const seconds = sec_num - hours * 3600 - minutes * 60;
  // 小于10的数值前面补0
  return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

修改完成后新增的所有任务都会以数组形式存储在LocalStorage中，页面刷新后也会自动加载历史任务。

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