Is it possible to save a used browser object localstorage?

Question

I made a Todo list with 3 features: add an item, delete and clean the input field.

I would like the added items to be saved after reloading the page, it is possible to do this using the Localstorage? If not, how else can I save the added items?

Another doubt, how can I reset the input every time I add an item ?

Javascript:

function myFunction(){
    var test = document.getElementById("retorno").value;
    var listValue = document.createTextNode(test);

    var cre = document.createElement("LI");
    document.getElementById("todolist").appendChild(cre);
    cre.appendChild(listValue);
};

function clearFields(){
    document.getElementById("retorno").value = "";
}

function deleteField(){
    var del = document.getElementById("todolist");

    if (del.hasChildNodes()){
        del.removeChild(del.lastChild);
    }
}

HTML:

<input id="retorno" name="texto"type="text" placeholder="Add item here...">
<button id="botao" onclick="myFunction()" type="button">Add</button>
<button type ="button" onclick="clearFields();">Clear</button>
<button type="button" onclick = "deleteField();">Delete</button>

Answer 1

Answering your first question, yes it is possible to save values using localStorage after reloading the page. Actually, all the data saved on localStorage are stored on your computer, even if you close the browser or turn off the machine.

About "reset" the input after adding the item, you can do so by passing an empty string to the attribute .value at the end of its function. Thus:

function myFunction(){
    var test = document.getElementById("retorno").value;
    var listValue = document.createTextNode(test);

    var cre = document.createElement("LI");
    document.getElementById("todolist").appendChild(cre);
    cre.appendChild(listValue);
    test.value = "";
};

<input id="retorno" name="texto"type="text" placeholder="Add item here...">
<button id="botao" onclick="myFunction()" type="button">Add</button>
<button type ="button" onclick="clearFields();">Clear</button>
<button type="button" onclick = "deleteField();">Delete</button>

<ul id="todolist">

</ul>

Answer 2

Yes, it is possible to save the data in the browser with localStorage. Saved information is stored permanently in the browser until you delete it.

To delete what was typed in the input after clicking "Add", simply call the function clearFields() at the end of the function that adds (myFunction()).

---

A very functional way is to use another function to make the control of the localStorage. Know that the localStorage (LS) only stores strings, so the solution I suggest is to create an array of <li> from the list and save to LS. Then just recover the saved string, convert to array again with .split() and make a loop by creating the list HTML and inserting it into ul. The code below makes everything work (see the explanatory comments):

I did not create a snippet because it does not accept localStorage.

HTML

<input id="retorno" name="texto" type="text" placeholder="Add item here...">
<button id="botao" onclick="myFunction()" type="button">Add</button>
<button type ="button" onclick="clearFields();">Clear</button>
<button type="button" onclick = "deleteField();">Delete</button>
<ul id="todolist"></ul>

Javascript

// controla o localStorage
function ls(e){

   if(e){
      // aqui grava o localStorage
       var array = []; // cria a array
       var lista = document.querySelectorAll("#todolist li"); // pega todas as <li>
       for(var item of lista){ // percorre as <li>
          array.push(item.textContent); // insere os valores na array
       }

      localStorage.setItem("dados", array);
   }else{
      // aqui retorna
      return localStorage.getItem("dados");
   }
}

function myFunction(){
    var test = document.getElementById("retorno").value;
    var listValue = document.createTextNode(test);

    var cre = document.createElement("LI");
    document.getElementById("todolist").appendChild(cre);
    cre.appendChild(listValue);
    clearFields(); // limpa o input
    ls(true);

};

function clearFields(){
    document.getElementById("retorno").value = "";
    document.getElementById("retorno").focus(); // coloca o foco no input
}

function deleteField(){
    var del = document.getElementById("todolist");

    if (del.hasChildNodes()){
        del.removeChild(del.lastChild);
        ls(true);
    }else{
       localStorage.removeItem("dados"); // apaga o localStorage
    }
}

// aqui quando carrega a página
// verifica se há algo no localStorage "dados"
if(ls()){

   var lis = ''; // variável vazia
   var ls_array = ls().split(","); // converte o localStorage em array
   for(var item of ls_array){
      lis += '<li>'+item+'</li>'; // cria o HTML das <li>
   }

   document.getElementById("todolist").innerHTML = lis; // insere o HTML na ul
}

Answer 3

As Jean has already said, yes, it is possible to save the data in the Torage locale, and they will remain there indefinitely. The data saved in localStorage remains there until it is cleared, i.e., it does not have an expiration date, other than sessionStorage, which clears the data as soon as the browser session is closed (the browser is closed).

To clear the input whenever you add an item, you just need to assign an empty string to it. I suggest you create a function that receives an input element and clean it, then, whenever you add the item to the list, you call the function by passing the object that references the input! : D

Thus:

function myFunction(){
    var test = document.getElementById("retorno").value;
    var listValue = document.createTextNode(test);

    var cre = document.createElement("LI");
    document.getElementById("todolist").appendChild(cre);
    cre.appendChild(listValue);
    test.value = "";
    
    //após ter feito a lógica toda (salvado o item na lista), chama a função de limpar o input:
    limpaInput(document.getElementById('retorno'));
};

function limpaInput(elemento){
  elemento.value = ''
}