How to Keep checkbox previous state after refresh

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>
</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 like Shows tick on checkbox But in load function if condition not working . its goes to else.