How to Keep checkbox previous state after refreshing page

Question

<div class="col-sm-12 form-group mt-15">
  <label class="active">Blood Group</label>
  <span style="float: right;">
     <input type="checkbox" id="emp_blood_group"  name="colorCheckbox" value="0" > 
  </span>
</div>

<tr>
<td class="text-right v-middle blood_group hide "><?php echo $employee['blood_group']; ?></td>
</td>
</tr>

<script type="text/javascript">


$(document).ready(function () {
  if (localStorage.getItem("emp_blood_group") !== null)
    $("#emp_blood_group").prop("checked", localStorage.getItem("emp_blood_group") == ("true" || "false"));
  //localStorage.removeItem("emp_blood_group"); //if you want the data to persist only for the first reload
});

$("#emp_blood_group").click(function () {
  var blood_group = $("#emp_blood_group").prop("checked");
  localStorage.setItem("emp_blood_group", blood_group.toString());
  blood_group == true ? $(".blood_group").removeClass("hide") : $(".blood_group").addClass("hide");
});

$( window ).on( "load", function() {
        
   if ($('#emp_blood_group').is(":checked"))
{
  emp_blood_group=$('#emp_blood_group').val();
  window.alert(emp_blood_group)
  
}else{ window.alert('sfsf')}
    });

</script>

Here i have using checkbox for added dynamically table row and after did some filter operation on table after filter page is refreshing checkbox becomes previous state which i have clicked But in load function if condition not working . its goes to else.

Answer 1

I think you should use JS cookies to store check box state.

I've mention cookies library cdn link in below code.

<!-- Link this to head of document -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.1/js.cookie.min.js" integrity="sha512-wT7uPE7tOP6w4o28u1DN775jYjHQApdBnib5Pho4RB0Pgd9y7eSkAV1BTqQydupYDB9GBhTcQQzyNMPMV3cAew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

After that use the below code

<div class="col-sm-12 form-group mt-15">
          <label class="active">Blood Group</label>
          <span style="float: right;">
             <input type="checkbox" id="emp_blood_group"  name="colorCheckbox" value="0" > 
          </span>
        </div>

        <tr>
        <td class="text-right v-middle blood_group hide "><?php echo $employee['blood_group']; ?></td>
        </tr>


<script type="text/javascript">
    // saving checkbox state in cookies 
    $('#emp_blood_group').click(function() {
        if($('#emp_blood_group').is(':checked')){
            Cookies.set('checkbox','checked');
        }else{
            Cookies.set('checkbox','unchecked');
        }
    });

    // get cookie value and perform action

    var checkBoxState = Cookies.get('checkbox');

    if(checkBoxState == 'checked'){
        $('#emp_blood_group').attr('checked','');
    }else{
        $('#emp_blood_group').removeAttr('checked');
    }

</script>

see documentation here https://github.com/js-cookie/js-cookie

Answer 2

I don't know exactly what want but the code below show how to have data persistent, in your case of a checkbox.

$(document).ready(function () {
  if (localStorage.getItem("emp_blood_group") !== null)
    $("#emp_blood_group").prop("checked", localStorage.getItem("emp_blood_group") == ("true" || "false"));
  //localStorage.removeItem("emp_blood_group"); //if you want the data to persist only for the first reload
});

$("#emp_blood_group").click(function () {
  var blood_group = $("#emp_blood_group").prop("checked");
  localStorage.setItem("emp_blood_group", blood_group.toString());
  blood_group == true ? $(".blood_group").removeClass("hide") : $(".blood_group").addClass("hide");
});

The state of the checkbox persist on refreshing the page.

EDIT:
My answer was to your original question, we're getting off topic here.
In this case $(document).read() and $( window ).on( "load" are equivalents.

$(document).ready(function () {
   if (localStorage.getItem("emp_blood_group") !== null)
      $("#emp_blood_group").prop("checked", localStorage.getItem("emp_blood_group") == ("true" || "false"));
   if (localStorage.getItem("emp_blood_group") == ("true" || "false")) {
      emp_blood_group = $("#emp_blood_group").val();
      window.alert(emp_blood_group);
   } else {
      window.alert("sfsf");
   }
});

$("#emp_blood_group").click(function () {
   var blood_group = $("#emp_blood_group").prop("checked");
   localStorage.setItem("emp_blood_group", blood_group.toString());
   blood_group == true ? $(".blood_group").removeClass("hide") : $(".blood_group").addClass("hide");
});