Javascript 待办事项列表的本地存储问题

我正在尝试将本地存储添加到我的待办事项列表中。刷新页面时会维护列表项，但返回的值为未定义。我怀疑这与调用底部的addInput函数时缺少参数有关，但我看不到解决方法

此外，如果启用了切换选中的类，并且项目被划掉，是否有方法存储类信息

我非常感谢你能给我的任何帮助

违规代码如下：

请试试这个：

<input type="text" style="font-size:25px;" id="input" placeholder="Write here">

<button id="addBtn">Add item</button>

<ul id="myUL">
</ul>

<script>
    let todo = [];

    document.getElementById('addBtn').addEventListener('click', function () {
        let value = document.getElementById('input').value;
        if (value) {
            todo.push(value);
            saveTodos()
            addInput(value);
        }
    });

    function addInput(text) {
        //add list item on click
        let listItem = document.createElement('li');
        let list = document.getElementById('myUL');
        let input = document.getElementById('input').value;
        let textNode = document.createTextNode(text);

        //create and append remove button  
        let removeBtn = document.createElement("BUTTON");
        list.appendChild(removeBtn);
        removeBtn.className = "removeBtn";
        removeBtn.innerHTML = "Remove item";
        listItem.appendChild(removeBtn);
        list.appendChild(listItem);
        listItem.appendChild(textNode);
        document.getElementById("input").value = "";
        removeBtn.addEventListener('click', removeItem);
        //console.log(todo); 
    }

    //remove list item on click  
    function removeItem() {
        let item = this.parentNode.parentNode;
        let parent = item.parentNode;
        let id = parent.id;
        let value = parent.innerText;


        todo.splice(todo.indexOf(value, 1));
        saveTodos();
        this.parentNode.parentNode.removeChild(this.parentNode);
        console.log(todo)
    }

    function saveTodos() {
        let jsonstr = JSON.stringify(todo);
        localStorage.setItem('todos', jsonstr);
    }

    function getTodos() {
        localStorage.getItem('todos')
        let jsonstr = localStorage.getItem("todos");
        todos = JSON.parse(jsonstr);
        if (todos && !todos.length) {
            todos = [];
        }
        else{
            if(todos){
                for(var intCounter = 0; intCounter < todos.length; intCounter++){
                    addInput(todos[intCounter]);
                }
            }
        }
    }

    //cross out text on click
    document.addEventListener('click', function (ev) {
        if (ev.target.tagName === 'LI') {
            ev.target.classList.toggle('checked');
            saveTodos();
        }
    });

    getTodos();
    // addInput();
</script>

添加项


让todo=[]；
document.getElementById（'addBtn'）。addEventListener（'click'，function（）{
让value=document.getElementById（'input'）.value；
如果（值）{
todo.push（值）；
saveTodos（）
附加输入（值）；
}
});
函数addInput（文本）{
//单击添加列表项
让listItem=document.createElement（'li'）；
let list=document.getElementById（'myUL'）；
让输入=document.getElementById（'input'）。值；
让textNode=document.createTextNode（text）；
//创建和附加删除按钮
让removeBtn=document.createElement（“按钮”）；
list.appendChild（removeBtn）；
removeBtn.className=“removeBtn”；
removeBtn.innerHTML=“删除项目”；
listItem.appendChild（removeBtn）；
list.appendChild（listItem）；
appendChild（textNode）；
document.getElementById（“输入”）.value=“”；
removeBtn.addEventListener（'单击'，removeItem）；
//控制台日志（todo）；
}
//单击删除列表项
函数removietem（）{
让item=this.parentNode.parentNode；
让parent=item.parentNode；
设id=parent.id；
让value=parent.innerText；
todo.splice（todo.indexOf（值1））；
saveTodos（）；
this.parentNode.parentNode.removeChild（this.parentNode）；
console.log（todo）
}
函数saveTodos（）{
让jsonstr=JSON.stringify（todo）；
setItem（'todos'，jsonstr）；
}
函数getTodos（）{
localStorage.getItem（'todos'）
让jsonstr=localStorage.getItem（“todos”）；
todos=JSON.parse（jsonstr）；
if（todos&！todos.length）{
todos=[]；
}
否则{
如果（待办事项）{
对于（var intCounter=0；intCounter

在getToOS函数中调用addInput，以便在检索完列表后立即打印它

这就是我所改变的：

函数getTodos

  function getTodos() {
     localStorage.getItem('todos')
     let jsonstr = localStorage.getItem("todos");
     todos = JSON.parse(jsonstr);
     if (todos && !todos.length) {
         todos = [];
     }
     else{
         if(todos){
             for(var intCounter = 0; intCounter < todos.length; intCounter++){
                 addInput(todos[intCounter]);
             }
         }
     }
 }

函数getTodos（）{ localStorage.getItem（'todos'） 让jsonstr=localStorage.getItem（“todos”）； todos=JSON.parse（jsonstr）； if（todos&！todos.length）{ todos=[]； } 否则{ 如果（待办事项）{ 对于（var intCounter=0；intCounter

注释了addInput（）

---

你把todoList存放在哪里了？我想这是个错误-谢谢你指出这一点。我把它改成了“待办事项”，但ut仍然不起作用。你提到的代码笔仍然存在一些问题。此外，出于某种安全目的，我认为codepen不允许您访问本地存储；您定义了todo并使用了todo。好吧-我怀疑可能是Codepen的问题。虽然我也见过其他本地存储的钢笔。非常感谢你帮我研究这个。这些更改至少在Codepen中产生了一个错误。在控制台中，它显示“uncaughtsyntaxerror:unexpectedtoken”，我认为您在js部分也复制了一些html标记。你也抄了吗？另外，你能不能只创建一个html文档，粘贴这个代码，然后试着运行，因为我担心代码笔无法工作，并且会向您显示与我尝试运行代码笔时显示的错误相同的错误。我已将其全部复制到HTML的部分，它出现了以下错误：index.HTML:19 Uncaught TypeError:无法读取索引处null的属性'addEventListener'。HTML:19。它产生与外部JS文件相同的错误没有问题。您可能需要更改当前保存的信息类型。您当前正在保存一个数组。具有类似这样结构的对象可能会帮助您：[{text:'用户写什么'，className:'任何className'}]；。

  function getTodos() {
     localStorage.getItem('todos')
     let jsonstr = localStorage.getItem("todos");
     todos = JSON.parse(jsonstr);
     if (todos && !todos.length) {
         todos = [];
     }
     else{
         if(todos){
             for(var intCounter = 0; intCounter < todos.length; intCounter++){
                 addInput(todos[intCounter]);
             }
         }
     }
 }