Chrome浏览器LocalStorage中扩展运算符（Triple dot notation）失效求助

嘿，我马上就发现你遇到的问题了——你现在的代码每次添加新收入数据时，都是直接覆盖掉原来的单个income对象，而不是把新数据追加进去！这是因为你用单个对象来存储收入条目，而不是用数组来管理多个条目。

问题根源拆解 #

你原来的逻辑里，当incomes存在时，执行incomes = { ...incomes, income: data }——这行代码的作用是把原incomes里的income字段直接替换成新的data对象，旧数据自然就丢失了，完全达不到“添加新对象”的效果。

修正后的代码 #

我们需要把存储收入条目的结构改成数组，这样就能轻松追加新数据了：

// 从LocalStorage读取数据，解析后如果为空则初始化含空数组的对象
let incomes = JSON.parse(localStorage.getItem("Incomes")) || { incomesList: [] };

// 构造新的收入数据对象（这里假设capital、name、price已经提前定义）
let data = { 
  capital: capital, 
  name: name, 
  price: price 
};

// 用扩展运算符生成新数组，追加新数据（也可以用push，但扩展运算符更符合immutable编程习惯）
incomes.incomesList = [...incomes.incomesList, data];

// 将更新后的数据存回LocalStorage
localStorage.setItem("Incomes", JSON.stringify(incomes));

额外兼容优化（可选） #

如果你的LocalStorage里已经存有旧的单对象结构数据（比如之前存的是{ income: {...} }），可以加一段兼容逻辑，避免旧数据丢失：

// 兼容旧数据：如果原来的存储结构不是数组，就把单个对象转成数组
let incomes = JSON.parse(localStorage.getItem("Incomes"));
if (!incomes) {
  incomes = { incomesList: [] };
} else if (!Array.isArray(incomes.incomesList)) {
  // 把旧的单个income对象转成数组
  incomes.incomesList = incomes.income ? [incomes.income] : [];
  // 删除旧的单个income字段（可选）
  delete incomes.income;
}

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