To-do list

Question

It is the following I am making a to-do list and at this point I have a question I wanted to make a checkbox for when the task is completed the person to put checked my question is whether it is necessary database for that purpose or not? so that when giving Load the page it keeps the decision of the person! and if it is with database which is the best way?

<div class="to-do-label">
    <div class="checkbox-fade fade-in-primary">
       <input type="checkbox" id="id_do_checkbox" value="">
    </div>
</div>

Answer 1

You don’t need to use a database for this. You can save this information using Javascript localStorage.

The localStorage works similar to a cookie, which you can use to store information to be used later, and which remain even if the user closes the browser (more info on localStorage at this link).

You can create a Listener in jQuery for the checkbox which will create (or delete the localStorage):

$("#id_do_checkbox").on("click", function(){
   if($(this).prop("checked")){
      localStorage.marcado = true;
   }else{
      localStorage.removeItem("marcado");
   }
});

And make a check if the localStorage exists, marking the checkbox automatically on page loading:

$(document).ready(function(){
   if(localStorage.marcado){
      $("#id_do_checkbox").prop("checked", true);
   }
});

In the case of multiple checkbox

$("input[type='checkbox']").on("click", function(){
   var box = $("input[type='checkbox']");
   if($(this).prop("checked")){
      localStorage.setItem('marcado'+box.index(this), true);
   }else{
      localStorage.removeItem("marcado"+box.index(this));
   }
});

$(document).ready(function(){
   var boxes = $("input[type='checkbox']");
   for(var x = 0; x < boxes.length; x++){
      if(localStorage.getItem("marcado"+x)){
         $(boxes[x]).prop("checked", true);
      }
   }
});