Sim, é possível salvar os dados no navegador com localStorage
. As informações salvas ficam armazenadas de forma permanente no navegador, até que você as apague.
Para apagar o que foi digitado no input após clicar em "Adicionar", basta chamar a função clearFields()
no final da função que adiciona (myFunction()
).
Uma forma bastante funcional é usar uma outra função para fazer o controle do localStorage
. Saiba que o localStorage
(LS) só armazena strings, sendo assim, a solução que sugiro é criar uma array com os textos das <li>
da lista e salvar no LS. Depois basta recuperar a string salva, converter em array novamente com .split()
e fazer um loop criando o HTML da lista e inserir na ul
. O código abaixo deixa tudo funcionando (veja os comentários explicativos):
Não criei um snippet porque ele não aceita 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
}