Help needed in saving data to local storage

1

I am making a to-do list and I am quite stuck on how to implement the "completed task"
So, if I click on a task in a list which is completed, I am addding a class to it which has a text-decoration of line through.
Now, I am stuck on how to update in local storage so that I get those completed lines after closing the browser

function show(){
    var todos = get_todos();
    var html="<ul>";
    for(var i=0; i<todos.length; i++) {
        html+= '<li><button class="checked"></button>' + todos[i] + '<button class="remove" id="' + i  + '">x</button></li>';
    }
    html+="</ul>";
    $("#todos").html(html);
    $(".remove").click(function(event){
        event.currentTarget.parentElement.remove();
        removeStorage();        
    }); 
//tasks which are completed
   **$("#todos").on('click','li',function(){**
**    $(this).addClass("taskCompleted");**
**});**     
}

$("input").keydown(function(e){
    if(e.keyCode===13){
        event.preventDefault();
        add();    
    }
});

function get_todos(){
    var todos = [];
    var todos_str = localStorage.getItem('todo');
    if(todos_str !=null){
        todos = JSON.parse(todos_str);
    }
    return todos;
}
// Adding a new TODO entry
function add(){
    var todos = get_todos();
    var task = $('#task').val();
    todos.push(task);
    localStorage.setItem('todo',JSON.stringify(todos));
    //update list of the TODO's displayed on webpage
    show()
    $("input").val("");
    //avoid any further actions generated by 'click' event
    return false;
}

//remove the to-do list items from localStorage
function removeStorage(){
    var todos = get_todos();    
    var id = event.currentTarget.getAttribute('id');
        todos.splice(id,1);
    localStorage.setItem('todo',JSON.stringify(todos));
    show();
    return false;
}
2

Can you please explain in more detail what part you need help with? It looks like your call to localStorage should be writing fine.

3

So when I add this class to a particular list item, I want it to get updated in local storage , so that after re-opening the browser,I get that line -through in the tasks which are completed

4

Maybe I’m not fully understanding the problem you’re trying to solve, but would keeping a list of “done” items in your local storage object help? Alternatively, your “todo” items could be objects with a “done” property that you set the class based on.

5

Ok, let me try to explain again. If i click on task in a list which is updated, I get a line through as I have added in the style for “taskCompleted” . But if i reopen my browser again, the style goes away , everything else is same. So I need to update this class which is “taskCompleted” to that task in the local Storage
Here’s a link to my code. Try adding some task and clicking on a particular task and then refresh the browser

6

Right. If, for example, you made your todo items in local storage objects with a text and isDone attributes you could conditionally add the taskCompleted class to the item in your show() loop.

To illustrate what I mean, here is one (non optimal) way that could look. (This may have syntax errors. I didn’t check it.)

html+= '<li'+ todos[i].isDone ? 'class="taskCompleted"' : '' + '><button class="checked"></button>' + todos[i].text + '<button class="remove" id="' + i  + '">x</button></li>';
7

@ArielLeslie Thanks a lot , I got it working now. :slight_smile:
I added the isdone property to the object and checked each time in the updateLocalStorage function.
Sharing my updated code. :slight_smile:
https://codepen.io/shilpiverma/pen/dVgVpv?editors=1011
Do you have any ideas how can I implement this for a calendar. So for ex: If click today’s date on my calendar, I get a new to-do list where I can add my tasks for the day. But if I click on a previous date like yesterday, I can get my saved to-do fetched from localStorage