javascript – Is there a possibility to save a used localstorage object from the browser?

Question:

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

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

Another question, 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:

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

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

---

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

I didn't create a snippet because it doesn't support 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
}