Javascript 如何从本地存储（todo应用）加载ul？

我已经用vanilla js创建了一个经典的todo应用程序，来练习一些事情，其中之一就是保存和加载到localStorage或从localStorage加载

我似乎让应用程序保存到localStorage，但在刷新页面时没有从中加载

我并不是把所有的东西都存储在一个数组中，而是一个ul，其中的项目在单独的li中

我很想得到一些关于如何使它工作的想法

代码如下

下面是一个带有我的代码的JSFIDLE链接：

---

您应该将todolist作为全局数组进行维护

let 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));

现在remove应该从待办事项列表中删除并调用save，列表项的状态更改也是如此

为了从本地存储加载，您应该将它们加载到document ready上，如下所示：

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
           }
      }
  }

todo_list=JSON.parse（localStorage.getItem（'list'）； 如果（todo_list.length>0）{

---

对于（让我=0；我说，我似乎没有看到你调用过

loadStorage

方法？哦，是的，我在事件侦听器上方有它用于单击，但它不起作用，所以我在发布到这里之前删除了它。然后发生的事情是，我无法向列表中添加内容或任何需要你回复的内容。我尝试了它，它似乎存储到了stora中但是当我刷新页面时没有显示页面上的项目。我在下面发布了一条关于loadStorage函数现在的样子的评论

const loadStorage=（）=>{todo_list=JSON.parse（localStorage.getItem（'list'））；if（todo_list.length>0）{for（let I=0；I

如果它看起来很奇怪，很抱歉，但我不能发表更长的评论。.我添加这篇文章是为了显示项目，但它显示的是所有未完成的内容（即使我标记了它们），并且它也没有显示删除btn。

if（item.status）{list.classList.add（'checked'）；done.appendChild（li）；return；}undone.appendChild（li）；}

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
           }
      }
  }