javascript - 如何从 javascript 中的用户输入中创建一个新的对象数组

Question

我正在做一个待办事项列表项目。我开始使用下面代码中的对象数组构建该项目，但现在我想使用用户输入从头开始构建该对象数组。

我想首先加载所有对象数组，因为整个项目依赖于该对象数组才能工作。

const arrOfObjs = [
 {
  description: 'Wash the dishes',
  completed: false,
  index: 0,
 },

 {
   description: 'Complete To Do list project',
   completed: false,
   index: 1,
 },

 {
   description: 'Understand data structure',
   completed: false,
   index: 2,
 },
];

这在我刷新页面时会很好地加载数组，但是当我第二次刷新页面并向列表中添加一个新项目时，它只会构建一个新项目并删除最后一个项目。

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

let arrOfObjs = [];

enter.addEventListener('click', () => {
  let userObj = new Task(userInput.value, false, 0);

  arrOfObjs.push(userObj);

  savingOnLocal(arrOfObjs)
});

在 saveOnLocal 函数中，我有一个带有关键“任务”的 localStorage，我从另一个模块调用该函数。

如果我将功能 SavingOnLocal() 放在花括号之外，则不会发生任何事情。另一件事是，我以用户 obj 的名称创建的对象应该在每次用户创建新任务时增加索引。希望你能帮助我干杯！！

我从这里开始：

如果我添加 2 个新项目并在刷新页面后会发生这种情况：

但是，如果我尝试添加新项目并再次刷新页面后，就会发生这种情况，它只会给我新项目并覆盖其他项目。

标签： javascript

Answer 1

您似乎正在尝试将列表的内容保存到导航器的本地存储中。但是当您初始化列表时，您不会从所述本地存储中获取值。发生以下情况：

1. 您加载页面并初始化数组。
2. 你把一些任务放在数组中
3. 您将这些任务保存到本地存储
4. 页面重新加载，并且该数组未使用本地存储中的值初始化，而是一个空数组。

您可以执行以下操作：

const arrOfObjs = localStorage.getItem('arrayOfObjs');

if (arrOfObjs !== null) { // We are in the case when nothing has been saved yet
    arrOfObjs = [];
}

enter.addEventListener('click', () => {
  let userObj = new Task(userInput.value, false, 0);

  arrOfObjs.push(userObj);

  savingOnLocal(arrOfObjs)
});