有沒有一種方法可以將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);

這是一個演示的小提琴 :)