Help needed in saving data to local storage

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>';
//tasks which are completed
**    $(this).addClass("taskCompleted");**


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();
    //update list of the TODO's displayed on webpage
    //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');
    return false;

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

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

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.

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

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>';

@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:
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