制作基本的待办事项列表。在刷新时访问本地存储以保留待办事项列表时，我得到 {"TODO_ITEM:1":"wash trees"} 而不是洗碗

Question

我制作了一个非常基本、简单的待办事项列表。当我通过输入（洗碗）添加到列表时，它会显示为洗碗。但是在刷新时，当从本地存储访问数组中的对象时，我会返回{“TODO_ITEM：1”：“洗碗”}。我的主要问题是我哪里搞砸了以及如何修复它。我假设我访问数据的方式一团糟。我在访问对象的值时查找和找到的所有内容要么不起作用，要么说它不是函数，要么以 [object object] 的形式返回。这可能是我作为初学者的第五个编码项目，任何和所有建议都有帮助！

//Select everything
const list = document.querySelector('#todo-list');
const form = document.querySelector('#create-todo');
const input = document.querySelector('#new-todo');
let todoCount = 1;
let obj = {};
let todo = [];

// let data = localStorage.getItem('')
//Remove button to remove li
list.addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    e.target.classList.toggle('done');
  } else if (e.target.tagName === 'BUTTON') {
    e.target.parentElement.remove();
  }
})

// creating a new todo
form.addEventListener('submit', function(e) {
  //preventing refresh
  e.preventDefault();
  //adding array to local storage
  addToLocalStorage(todo)
  //creating and adding new li w/button to list
  createLi()

  console.log(localStorage)
})

//accessing local storage
function getFromLocalStorage() {
  const reference = localStorage.getItem('TODO_LIST')
  if (reference) {
    todo = JSON.parse(reference)
    renderTodo(todo)
  }
}

//new Li function
function createLi() {
  const newLi = document.createElement('li');
  const newBtn = document.createElement('button');

  newLi.innerText = input.value;
  list.append(newLi);

  newBtn.innerText = 'Remove';
  newLi.append(newBtn);
  input.value = '';
}

//add to local storage function
function addToLocalStorage(todo) {
  let obj = {}

  let key = 'TODO_ITEM:' + todoCount
  console.log(obj)
  todoCount++
  obj[key] = input.value
  todo.push(obj)
  localStorage.setItem('TODO_LIST', JSON.stringify(todo))
}

// keep todo list on refresh function
function renderTodo() {
  list.innerHTML = '';

  for (let i = 0; i < todo.length; i++) {
    console.log(todo[i])
    let indx = todo[i]
    const newLi = document.createElement('li');
    const newBtn = document.createElement('button');
    newLi.innerText = JSON.stringify(indx);
    list.append(newLi);
    console.log()
    newBtn.innerText = 'Remove';
    newLi.append(newBtn);
    console.log(indx)
  }
}

getFromLocalStorage();

Answer 1

当前版本

问题是待办事项以 js 对象的形式保存到

localstorage

，格式如下：

// { key: value }
{"TODO_ITEM:1": "Todo value"}

因此，当您稍后提取它时，您需要访问保存待办事项文本的对象的值：

function getFromLocalStorage() {
  // this returns a list of todos in the above format
  const reference = localStorage.getItem('TODO_LIST');

  if (reference) {
    const todoItems = JSON.parse(reference);

    // loop over the todos array and get individual todos
    todoList = todoItems.map((item) => {
      // use Object.values to get the 'Todo value' from the object {"TODO_ITEM:1": "Todo value"}
      const todoValue = Object.values(item)[0];
      return todoValue;
    });
    todo = todoList;
    renderTodo(todo);
  }
}

然后在您的

renderTodos

函数中，不要对值进行字符串化：

// Remove this
newLi.innerText = JSON.stringify(indx);

// add this
newLi.innerText = indx;

更好的版本

如果您考虑仅将待办事项文本列表存储为

['wash dishes', 'have some coffee']

等，此过程可能会容易得多。将待办事项添加为对象只会使逻辑复杂化，因为它只是一个简单的待办事项应用程序。

因此我建议你实施这样的事情：

addToLocalStorage

功能：

function addToLocalStorage(todo) {
  todo.push(input.value);
  localStorage.setItem('TODO_LIST', JSON.stringify(todo));
}

getFromLocalStorage

功能：

function getFromLocalStorage() {
  // this returns a string object in the form { }
  const reference = localStorage.getItem('TODO_LIST');

  if (reference) {
    const todoItems = JSON.parse(reference);
    todo = todoItems;
    renderTodo();
  }
}

希望有帮助。