如何修改LocalStorage中数组内对象的status属性？

我在模板里有个绑定了点击事件的复选框，目标是修改数组eintraege中某个Eintrag对象的status布尔属性，目前代码如下：

<input type="checkbox" (change)="eintrag.status= !eintrag.status" onclick="changeStatus(eintrag)"/>

其中eintraege是Eintrag[]类型的数组，数据会通过this.eintragService.saveData('token', JSON.stringify(this.eintraege))存储到LocalStorage。

Eintrag接口定义：

export interface Eintrag {
  beschreibung: string;
  status: boolean;
  faelligkeitsdatum: string;
}

现在我想实现changeStatus方法，不删除原对象的前提下修改其status属性，并且保留在数组的原索引位置，请问这是否可行？目前我的方法只能找到对象的索引，之后只能删除该元素，不知道怎么直接替换修改：

this.eintrag = eintrag;
const beschreibung = this.eintrag.beschreibung;
const index = this.eintraege.findIndex(eintrag => eintrag.beschreibung === beschreibung);

// 目前只能删除，想改成直接修改
if (index > -1) {
  this.eintraege.splice(index, 1);
}

完全可以实现，根本不需要删除原对象再替换——数组里存储的是对象的引用，直接修改对象的属性就会同步到数组中，或者通过索引定位后修改对应位置的属性即可，两种方法都能保留原索引：

方法1：利用对象引用直接修改 #

因为你已经拿到了目标eintrag对象，直接修改它的status属性，数组里的对应元素会自动同步（因为是同一个引用），之后调用保存方法即可：

changeStatus(eintrag: Eintrag) {
  // 直接切换status值
  eintrag.status = !eintrag.status;
  // 保存到LocalStorage
  this.eintragService.saveData('token', JSON.stringify(this.eintraege));
}

同时建议修改模板，去掉重复的事件绑定（(change)和onclick二选一，推荐用Angular的事件绑定）：

<input type="checkbox" [checked]="eintrag.status" (change)="changeStatus(eintrag)"/>

这里加上[checked]="eintrag.status"可以让复选框的状态和对象属性保持同步。

方法2：通过索引定位修改 #

如果你想通过索引来操作（比如担心引用问题），找到索引后直接修改对应位置对象的status即可：

changeStatus(eintrag: Eintrag) {
  const index = this.eintraege.findIndex(item => item.beschreibung === eintrag.beschreibung);
  if (index !== -1) {
    // 直接修改数组对应索引处对象的status
    this.eintraege[index].status = !this.eintraege[index].status;
    // 保存到LocalStorage
    this.eintragService.saveData('token', JSON.stringify(this.eintraege));
  }
}

两种方法都能保留原对象在数组中的索引位置，不需要删除再添加操作。

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