How to save data in local storage

Question

I am creating a to-do-list in javascript and everything was good until I had to deal with the local storage. I want to be able to refresh the page without losing what I put in my list just before.

I searched in many forums but I didn't find a similar case.

Here is a part of my HTML code : Just an ul and an input

Here is a part of my JS code : My function which creates li inside my ul

And here is a preview of my to do list : Hope it helps

So if I didn't explain my problem well enough, let me know and I will bring more precisions.

Thank for reading !

PS : I should specify that I already read the documentation on MDN and others websites and I understood the principle of localStorage but I'm struggling with the integration of this in my code. I saw lot of examples of its use but they are often too simple or on the contrary too different/hard to understand. This is why I ask your help to have a little bit more personal response.

window.addEventListener('load', function()
{
    var yourToDo = document.getElementById('myInput');
    yourToDo.addEventListener('keydown', myFunction);
    function myFunction(e)
    {
        if (e.keyCode == 13)
        {
            var line = document.createElement('div'); //This is my div which contains the 3 items which constitute a line
            line.classList.add('myLine');
            document.getElementById('myUl').appendChild(line);

            var circle = document.createElement('i'); //The first item is a circle which can be check or unchecked
            circle.id = 'myCircle';
            document.querySelector('.myLine:last-child').appendChild(circle);
            circle.addEventListener('click', function()
            {
                this.classList.toggle('fas');
                this.classList.toggle('fa-check-circle');
                this.classList.toggle('unstyled');
                task.classList.toggle('crossedOut')
            });

            var task = document.createElement('li'); //The second item is a <li> which contains the value of the input
            task.innerHTML = yourToDo.value.charAt(0).toUpperCase() + yourToDo.value.slice(1);
            document.querySelector('.myLine:last-child').appendChild(task);         
            
            var trash = document.createElement('i'); //The third item is a trash which suppresses the whole line
            trash.classList.add('fas');
            trash.classList.add('fa-trash-alt');
            document.querySelector('.myLine:last-child').appendChild(trash);
            trash.addEventListener('click', function()
            {
                this.parentNode.remove();
            });

            yourToDo.value = '';
        }
    }

<section>
                <ul id="myUl"></ul>
                <label>
                    <input id="myInput" type="text" placeholder="Add your to do task" onfocus="this.placeholder = ''"    onblur="this.placeholder = 'Add your to do task'">
                </label>
            </section>

Answer 1

I don't think that localStorage works in the code-snippets but try this in your own code.

I added a function to your code that gets all localStorage items and creates a list item for each on page load. Also added where you should save it to localStorage in your original function.

Comments are added throughout.

Hope this helps

window.addEventListener('load', function() {
  var yourToDo = document.getElementById('myInput');
  yourToDo.addEventListener('keydown', myFunction);

  function myFunction(e) {
    if (e.keyCode == 13) {
      var line = document.createElement('div'); //This is my div which contains the 3 items which constitute a line
      line.classList.add('myLine');
      document.getElementById('myUl').appendChild(line);

      var circle = document.createElement('i'); //The first item is a circle which can be check or unchecked
      circle.id = 'myCircle';
      document.querySelector('.myLine:last-child').appendChild(circle);
      circle.addEventListener('click', function() {
        this.classList.toggle('fas');
        this.classList.toggle('fa-check-circle');
        this.classList.toggle('unstyled');
        task.classList.toggle('crossedOut')
      });

      var task = document.createElement('li'); //The second item is a <li> which contains the value of the input


      task.innerHTML = yourToDo.value.charAt(0).toUpperCase() + yourToDo.value.slice(1);

      //Set loacl storage item
      localStorage.setItem(yourToDo.value.charAt(0).toUpperCase() + yourToDo.value.slice(1), yourToDo.value.charAt(0).toUpperCase() + yourToDo.value.slice(1));

      document.querySelector('.myLine:last-child').appendChild(task);

      var trash = document.createElement('i'); //The third item is a trash which suppresses the whole line
      trash.classList.add('fas');
      trash.classList.add('fa-trash-alt');
      document.querySelector('.myLine:last-child').appendChild(trash);
      trash.addEventListener('click', function() {
        this.parentNode.remove();
      });

      yourToDo.value = '';
    }
  }
});


function load() {

  //Create each item (as you did above)
  function create(item) {
    var yourToDo = document.getElementById('myInput');

    var line = document.createElement('div'); //This is my div which contains the 3 items which constitute a line
    line.classList.add('myLine');
    document.getElementById('myUl').appendChild(line);

    var circle = document.createElement('i'); //The first item is a circle which can be check or unchecked
    circle.id = 'myCircle';
    document.querySelector('.myLine:last-child').appendChild(circle);
    circle.addEventListener('click', function() {
      this.classList.toggle('fas');
      this.classList.toggle('fa-check-circle');
      this.classList.toggle('unstyled');
      task.classList.toggle('crossedOut')
    });

    var task = document.createElement('li'); //The second item is a <li> which contains the value of the input

    //Set innerHTML to item that you ar passing in for loop below
    task.innerHTML = item;
    document.querySelector('.myLine:last-child').appendChild(task);

    var trash = document.createElement('i'); //The third item is a trash which suppresses the whole line
    trash.classList.add('fas');
    trash.classList.add('fa-trash-alt');
    document.querySelector('.myLine:last-child').appendChild(trash);
    trash.addEventListener('click', function() {
      this.parentNode.remove();
    });

    yourToDo.value = '';
  }


  //Create an array to store all local storage items
  var values = [],
    keys = Object.keys(localStorage),
    a = keys.length;

  //Push items to array
  while (a--) {
    values.push(localStorage.getItem(keys[a]));
  }

  //Create a for loop and loop through all array items and pass each item value to the create funtion above
  for (let i = 0; i < Object.keys(localStorage).length; i++) {
    create(values[i])
  }
}
//Call load on page load up (it would actually be better if you add this in your window "load" listener above )
load();


//Hope this helps!

<section>
  <ul id="myUl"></ul>
  <label>
    <input id="myInput" type="text" placeholder="Add your to do task" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Add your to do task'">
  </label>
</section>