5

Fiz uma Todo list com 3 funcionalidades: adicionar um item, deletar e limpar o input field.

Eu gostaria que os itens adicionados ficassem salvos após recarregar a pagina, é possível fazer isso usando o LocalStorage? Se não, de que outra forma posso salvar os itens adicionados?

Outra duvida, como posso resetar o input toda vez que eu adicionar um 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>
4
  • 1
    Tanto as perguntas e as respostas são formatadas com Markdown. Leia Ajuda na edição do Markdown Commented 31/01/2020 às 2:22
  • É possível salvar, sim. Links que podem ajudá-lo: pt.stackoverflow.com/q/413997/99718 e pt.stackoverflow.com/a/90597/99718 Commented 31/01/2020 às 2:24
  • @CypherPotato, mesmo editando a pergunta ela possui duas questões diferentes. Eu deveria sinaliza-la, mas acho que essa pergunta é muito boa para falar mais sobre armazenamento em JavaScript. E agora, como faz ? Commented 31/01/2020 às 4:45
  • @JeanExtreme002 responda a pergunta principal se tiver uma e notifique de criar uma outra pergunta para cada uma das demais. Se todas as perguntas feitas tiverem o mesmo foco e diferentes contextos, vote para fechar por "Ampla demais". Commented 31/01/2020 às 16:15

3 Respostas 3

3

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
}
3
  • Para que serve o parametro "e" passado na funcao ls e no if ? tambem nao entendi o parametro "carrega" na myFunction Commented 31/01/2020 às 6:30
  • @DouglasKramer O parâmetro "e" serve para indicar se o procedimento será de escrita ou leitura do LocalStorage, o valor dele, por padrão, é undefined (false). O carrega não tem uso. Commented 31/01/2020 às 7:22
  • @DouglasKramer Isso. O carrega esqueci de apagar.
    – Sam
    Commented 31/01/2020 às 13:05
3

Respondendo a sua primeira pergunta, sim é possível salvar valores utilizando localStorage após recarregar a página. Na verdade, todos os dados salvos no localStorage ficam guardados no seu computador, mesmo que você feche o navegador ou desligue a máquina.

Sobre "resetar" o input após adicionar o item, você pode fazê-lo passando uma String vazia para o atributo .value no final da sua função. Dessa forma:

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>

1
  • @ValdeirPsr obrigado pelas dicas, mas a primeira pergunta dele eu respondi ou pelo menos a alternativa IF kk. Não sei dizer quais outras formas de se salvar dados além do localStorage e sessionStorage porque não tenho um vasto conhecimento em JavaScript ou qualquer outra coisa relacionada a programação web. Se puder ajudar nessa parte eu agradeço. Commented 31/01/2020 às 2:55
1

Como o Jean já disse, sim, é possível salvar os dados no localStorage, e eles ficarão lá por tempo indeterminado. Os dados salvos no localStorage permanecem lá até que sejam limpos, ou seja, não têm uma data de expiração, diferente do sessionStorage, que limpa os dados assim que a sessão do browser é encerrada (o navegador é fechado).

Para limpar o input sempre que adicionar um item, você só precisa atribuir uma string vazia a ele. Sugiro que crie uma função que receba um elemento input e o limpe, aí, sempre que adicionar o item à lista, você chama a função passando o objeto que referencia o input! :D

Assim:

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 = ''
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .