Is there a way to save an HTML list (UL, LI) to a file, and then retrieve, and display it later?

Question

I have a "todo list" (mostly "borrowed" from W3) where the user can enter data, and the data is then listed as a "li" object on the site. I want to store the data that the user inputs to a file, so that if the user refreshes, the items on the list will re-appear as they were.

I'm running this locally, so I preferably want to just store it in a textfile with separators.

I have tried to use some JS to get all the items with the tagname "li", but i haven't messed with JS in a long time, and im pretty rubbish. You can see what i tried below.

Javascript:

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

HTML list:

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

This is the alert I get when I enter some text:

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

I would optimally want to only get the text input, then somehow store the information, and display it the next time I refresh the website.

Please let me know if I need to change anything in my question, or if my question is too open. I assume I should only ask questions that have to do with code that is written wrong, not about code that isn't written yet, but I really need someone to point me in the right direction, so its worth a shot.. Thanks!

Answer 1

Using a button click you can store values in Local Storage like:

<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

What are newElement() & listGet() ?

You can get your li nodes by using getElementsByTagName() :

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

Here's a fiddle with a demo :)