如何从localStorage（待办事项应用程序）加载ul？

Question

[我已经在Vanilla js中创建了一个经典的todo应用，以实践一些事情，其中​​之一是保存并从localStorage加载和从中加载。

我似乎将应用保存到localStorage，但刷新页面时未从中加载。

我不将所有内容存储在数组中，而是将ul中的项目存储在单独的li中。

希望对如何使它起作用有一些想法。

下面是代码。

这是我的代码与jsfiddle的链接：https://jsfiddle.net/Jossif/udx27ye8/

const list = document.querySelector('.todo__list');
const undone = document.querySelector('.todo__list__undone');
const done = document.querySelector('.todo__list__done');

const newItem = e => {
  e.preventDefault();
  const text = document.querySelector('.todo__register__input').value;
  if (text === '') {
    return;
  }
  addItem(text);
  document.querySelector('.todo__register__input').value = '';
};

const addItem = text => {
  const li = document.createElement('li');
  li.innerHTML = text;
  const removeBtn = document.createElement('button');
  removeBtn.classList.add('remove__btn');
  removeBtn.innerHTML = 'X';
  li.appendChild(removeBtn);
  undone.appendChild(li);
  saveItem();
};

undone.addEventListener('click', event => {
  if (event.target.tagName === 'LI') {
    event.target.classList.toggle('checked');
    done.appendChild(event.target);
    saveItem();
  }
});

done.addEventListener('click', event => {
  if (event.target.tagName === 'LI') {
    event.target.classList.toggle('checked');
    undone.appendChild(event.target);
    saveItem();
  }
});

document.addEventListener('click', event => {
  event.preventDefault();
  if (event.target.classList.contains('remove__btn')) {
    event.target.parentElement.style.display = 'none';
  }
  saveItem();
});

const saveItem = () => {
  localStorage.setItem('list', list.innerHTML);
};

const loadStorage = () => {
  const data = localStorage.getItem('list');
  list.innerHTML = data;
};

btn.addEventListener('click', newItem);```


  [1]: https://jsfiddle.net/Jossif/udx27ye8/

Answer 1

您应该将todolist保持为全局数组

let todo_list=[]

现在添加项目应将新添加的项目推送到todo_list，例如

 const addItem = text => {
   const li = document.createElement('li');
    li.innerHTML = text;
    const removeBtn = document.createElement('button');
    removeBtn.classList.add('remove__btn');
    removeBtn.innerHTML = 'X';
    li.appendChild(removeBtn);
    undone.appendChild(li);
    todo_list.push({text:text,stats:0});//add it to list
    saveItem();
};

现在保存项目应将它作为json字符串而不是类似html元素的形式写到本地存储中：

localStorage.setItem('list',JSON.stringify(todo_list));

现在删除应从todo_list中删除并调用保存，对于列表项的状态更改也是如此。

为了从本地存储加载，您应该将它们加载到文档中，准备为：

todo_list=JSON.parse(localStorage.getItem('list');
 if(todo_list.length > 0){
    for(let i=0;i<10;i++){
           let item=todo_list[i];
           const li = document.createElement('li');
           li.innerHTML = item.text;
           const removeBtn = document.createElement('button');
           removeBtn.classList.add('remove__btn');
           removeBtn.innerHTML = 'X';
           li.appendChild(removeBtn);
           if(item.status){
             li.classList.add("checked");//your class to make it check
           }
      }
  }

希望这会对您有所帮助。