localStorage数组存储问题：索引值无法更新，新增数据仅显示最新项

我一眼就看出你代码里的几个关键问题，导致每次添加都只保留最新数据：

问题根源拆解 #

• 你每次调用save()函数时，都重新创建了一个空数组var task = [];，这直接把之前存储的数据都丢弃了；
• localStorage.getItem('task')执行后，你没有把获取到的值赋值给task变量，等于白做了这一步；
• localStorage只能存储字符串，直接存数组会被自动转成逗号分隔的字符串（比如["a","b"]会变成"a,b"），下次读取时没法直接恢复成数组结构。

修正后的代码 #

function save() {
  // 1. 从localStorage读取已有数据，没有的话初始化空数组
  let task = JSON.parse(localStorage.getItem('task')) || [];
  // 2. 把新任务push到数组里
  task.push(document.getElementById("txt1").value);
  // 3. 把数组转成JSON字符串存回localStorage
  localStorage.setItem('task', JSON.stringify(task));
  // 控制台验证结果
  console.log(task);
}

关键改动说明 #

• 用JSON.parse()把localStorage里的字符串转成数组，同时用|| []处理首次存储时没有数据的情况（此时getItem返回null，直接用空数组兜底）；
• 新增任务前先读取已有数据，确保不会丢失之前的内容；
• 存储时用JSON.stringify()把数组转成标准JSON字符串，保证下次读取能正确解析成数组。

你可以试试这个代码，现在每次调用save()都会把新任务追加到已有数组里，而不是覆盖啦！

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