有没有一种方法可以将HTML列表（UL，LI）保存到文件，然后检索并在以后显示？

Question

我有一个“待办事项列表”（主要是从W3借来的），用户可以在其中输入数据，然后数据在站点上被列为“ li”对象。 我想将用户输入的数据存储到文件中，以便用户刷新时，列表中的项目将重新显示。

我正在本地运行它，所以我最好只将其存储在带有分隔符的文本文件中。

我试图使用一些JS来获取所有带有标签名“ li”的项目，但是我已经很长时间没有弄乱JS了，我觉得这很垃圾。 您可以在下面查看我尝试过的内容。

Javascript：

    var arrayList = 
document.getElementById("myUL").getElementsByTagName("li");
    for (i=0; i<arrayList.length;i++) {
        alert(arrayList[0].innerHTML);
}
}

HTML清单：

    <h1>Todo</h1>
<div id="myDIV" class="header">
    <input type="text" id="myInput" onkeydown = "if (event.keyCode == 13) document.getElementById('addBtn').click()" placeholder="Task...">
    <span onclick="newElement(), listGet()" id="addBtn" class="addBtn">Add</span>
</div>
<ul id="myUL">

</ul>
</div>

这是我输入一些文本时收到的警报：

"Do the dishes<span class="close">×</span>"

我最好只获取文本输入，然后以某种方式存储信息，并在下次刷新网站时显示它。

如果我需要更改问题中的任何内容，或者我的问题过于公开，请告诉我。 我想我只应该问与编写错误的代码有关的问题，而不是与尚未编写的代码有关的问题，但是我真的需要有人指出正确的方向，因此值得一试。.谢谢！

Answer 1

使用按钮单击可以将值存储在本地存储中，例如：

<h1>Todo</h1>
<div id="myDIV" class="header">
  <div>
    <input type="text" id="myInput" onkeydown="if(event.keyCode == 13)  placeholder="Task...">
    <button onclick="newElement(), listGet()" id="addBtn" class="addBtn">Add</button>
  </div>
  <ul id="myUL">

  </ul>
</div>


<script  type="text/javascript">
  function newElement(){
     var inputData= document.getElementById("myInput");
     localStorage.setItem("data", inputData.value); // store values using setItem method
  }
</script>


// Get the value from Local Storage

var storedData = localStorage.getItem("data");

Answer 2

什么是newElement()和listGet() ？

您可以使用getElementsByTagName()获得li节点：

let yourUL = document.getElementById('myUL');
let yourLiNodeList = yourUL.getElementsByTagName('li');
console.log(yourLiNodeList);

这是一个演示的小提琴 :)