javascript - 有没有办法将 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");