JavaScript如何基于用户输入生成对象数组 解决存储覆盖及索引递增问题

问题原因 #

1. 页面初始化时未从localStorage读取已存储的任务数据，直接将arrOfObjs初始化为空数组，后续新增任务保存时直接覆盖了原有存储
2. 新建任务时index值固定写为0，没有实现自动递增

修复方案 #

首先修改初始化逻辑，页面加载时优先读取localStorage中的任务数据：

const userInput = document.getElementById('add-to-list');
const enter = document.getElementById('returnBtn');

// 初始化时先从localStorage读数据，没有数据就用空数组
let arrOfObjs = JSON.parse(localStorage.getItem('tasks')) || [];

enter.addEventListener('click', () => {
  // 过滤空输入
  if (!userInput.value.trim()) return;
  // index取当前数组的长度即可实现自动递增
  const userObj = new Task(userInput.value, false, arrOfObjs.length);
  arrOfObjs.push(userObj);
  // 保存到localStorage
  savingOnLocal(arrOfObjs);
  // 可选：添加完成后清空输入框
  userInput.value = '';
});

补充适配方案 #

如果后续需要支持删除任务的功能，可以调整index生成逻辑，避免出现index重复的问题：

// 取现有任务的最大index+1作为新任务的index，没有任务则从0开始
const nextIndex = arrOfObjs.length ? Math.max(...arrOfObjs.map(item => item.index)) + 1 : 0;
const userObj = new Task(userInput.value, false, nextIndex);

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