从本地存储中检索对象数组

Question

尝试制作待办事项列表，但我在本地存储方面遇到了困难。 首先，我不明白为什么本地存储返回 [object Object] 而不是实际文本。 其次，在某些时候本地存储变空，然后从头开始填充。 这让我很困惑

function addTask() {
    let addTaskButton = document.getElementById('add-task-button')
    let list = document.getElementById('task-list');
    let li = document.createElement('li');
    let checkbox = document.createElement('input');
    let taskText = document.createElement('span');
    let delButton = document.createElement('button');
    let btnText = document.createTextNode('Delete task');

    checkbox.type = 'checkbox';
    checkbox.className = 'checkbox';
    taskText.innerText =  document.getElementById('input-task').value;
    taskText.className = 'task';
    delButton.className = 'delete-btn';
    delButton.addEventListener('click', deleteTask)
    delButton.addEventListener('click', updateStorage)
    addTaskButton.addEventListener('click', updateStorage);

    delButton.appendChild(btnText);
    li.appendChild(checkbox);
    li.appendChild(taskText);
    li.appendChild(delButton);
    list.appendChild(li);

    document.getElementById('input-task').value = '';


    taskList.push({
        text: taskText.innerText,
        checked: false
    });
}

let taskList = [];

function updateStorage() {
    localStorage.setItem('tasks', JSON.stringify(taskList));
    console.log(taskList)
}

function deleteTask () {
    this.parentNode.remove();
}

document.getElementById('add-task-button').addEventListener('click', addTask);

function loadList() {
    document.querySelector('ul').innerHTML = JSON.parse(localStorage.getItem('tasks')) || [];
}

window.addEventListener('load', loadList);

Answer 1

我对原始帖子发表了评论，但我认为这可能有资格作为答案......

JSON.Parse您提供 object，当您尝试将 object 用作字符串时（设置元素的 innerHTML]），您将获得“[object]”文本。 存储在localStorage中的是已经代表您的 JSON 的字符串。 只需将 innerHTML 设置为从localStorage.getItem('tasks')调用返回的内容。

Answer 2

这边走：

const 
  inputTask = document.querySelector('#input-task')
, addTaskBt = document.querySelector('#add-task-button')
, taskList  = document.querySelector('#task-list')
, tasks     = JSON.parse(localStorage.getItem('tasks') || '[]')
, savTasks  =_=> localStorage.setItem('tasks',JSON.stringify(tasks))
  ;
tasks.forEach( newLItask )

addTaskBt.onclick =_=>
  {
  if (inputTask.value.trim()==='') return
  
  let taskElm = { txt: inputTask.value.trim(), checking:false }
  tasks.push( taskElm )

  newLItask( taskElm )
  savTasks()
 
  inputTask.value = ''
  inputTask.focus()
  }
taskList.onclick = ({target}) => // event delegayion for all buttons & checkboxes
  {
  if (!target.matches('button.delete-btn, input[type=checkbox]')) return

  let taskIndex = tasks.findIndex(task => task===target.closest('li').ref )

  if (target.matches('input[type=checkbox]'))
    tasks[taskIndex].checking = target.checked
  else  // delete
    {
    tasks.splice(taskIndex,1)
    target.closest('li').remove()
    }
  savTasks()
  }
function newLItask( taskElm )
  {
  taskList
  .appendChild(Object.assign(document.createElement('li'), {ref:taskElm} ))
  .innerHTML = `
    <input type="checkbox" class="checkbox" ${taskElm.checking ? 'checked': ''}>
    <span class="task"> ${taskElm.txt} </span>
    <button class="delete-btn">Delete task</button>`
  } 

用于检测：

#task-list {
  padding         : 0;
  list-style-type : none;
  }
#task-list li {
  margin     : .4em 0;
  }
#task-list li > span {
  display       : inline-block;
  width         : 20em;
  border-bottom : 1px solid lightsteelblue;
  margin        : 0 .6em 0 0;
  }
#task-list input[type=checkbox]:checked + span {
  text-decoration       : line-through ;
  text-decoration-style : wavy;
  text-decoration-color : orangered;
  }

<input type="text" id="input-task" placeholder="input task" size="26">
<button id="add-task-button" >add task</button>
<ul id="task-list"></ul>