javascript - 如何从 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/

标签： javascriptlocal-storagehtml-lists

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

现在 remove 应该从 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
           }
      }
  }

希望这会帮助你。