Problem with the Localstorage

Question

help here please. In this my To Do List when I create or delete items they are still saved while refreshing, and when I click on the checkbox it applies a CSS in the LI taching the word, only when I refreshed this animation of the CSS is not saved, how do I save it? Since Li is inside the ALL variable I thought it would save automatically, but that’s not what’s happening.

Thank you in advance.

var geraUl = document.querySelector('.caixa ul'); 
var pegaInput = document.querySelector('.campos #input'); 
var botao = document.querySelector('#botao');



var todos = JSON.parse(localStorage.getItem('to_do_list'))  || [] ;  


function mostrarTodos(){        

    geraUl.innerHTML ='';      

    for (item of todos) {       
        var newtodoli = document.createElement('li');     
        var label = document.createElement('label');
        var newtodotext = document.createTextNode(item);  
        var checkbox = document.createElement('input');   
        var img = document.createElement('img')



        checkbox.setAttribute('type', 'checkbox');
        checkbox.setAttribute('class', 'check');
        checkbox.setAttribute('id', 'checkbox');
        checkbox.addEventListener('click', tacharLi);

        img.setAttribute('src', './files/lixeira.svg');


        label.setAttribute('for', 'checkbox');




        var pos = todos.indexOf(item);   


        img.setAttribute('onclick', 'deletarLi(' + pos + ')');  






        geraUl.appendChild(newtodoli); 
        newtodoli.appendChild(newtodotext);         
        newtodoli.appendChild(checkbox);    
        newtodoli.appendChild(img)  ;





    }

}

mostrarTodos();




function Addtodo(){                          
    var txtadd = pegaInput.value ;           
    if (txtadd.length == 0 ) {             
        alert("Digite alguma tarefa.")
    } else {

    todos.push(txtadd);                
    pegaInput.value = '';               
    mostrarTodos();
    saveToStorage();

}}


function deletarLi(pos){                    

    todos.splice(pos, 1);               
    mostrarTodos();
    saveToStorage();
}


function tacharLi(){

        this.parentNode.classList.toggle('tachar')


    saveToStorage();

}




botao.onclick = Addtodo;              



document.addEventListener('keypress', function(e){     
    if(e.which == 13){

        Addtodo();

    }
 }, false);

function saveToStorage () {                

    localStorage.setItem('to_do_list', JSON.stringify(todos));


}

if you need to see the other files the github link is https://github.com/ricardogusi/to-do-list

Answer 1

Well let’s go for points.

You are using the same function to save and delete item in localStore, it would be better to have two functions one to save and one to delete.

Can use

localStorage.removeItem(key);

And in the case of css, to preserve the style you can create a flag on the inserted item, type checked that at first seira 0 and if the user clicked on the item would update to 1 and then yes the class would be applied.

I hope I’ve helped.