使用localStorage保持复选框输入处于选中状态

Question

I am currently learning localStorage and tried to implement some basic function using checkbox, localStorage . Basically what I am trying to implement is whenever the checkbox is checked, I want them are keep checked after page reload.

view:

 <div>
    <label><input type="checkbox"value="<%=obj.id%>" name="selected" class="select_class"></label>
 </div>

JS

  $("#save_button").click(function(){
    var selecteditems = [];

      if (!$("input[name='selected']:checked").is(":checked")) {
          localStorage.removeItem('chx');
         //if checkboxs are not checked, remove the setItem
        }
      else{
        $("input[name='selected']:checked").each(function(){
        var checked = $(this).val();
        if(checked){
          selecteditems.push(checked);

        localStorage.setItem('chx', JSON.stringify(selecteditems));
        var localcheckdata =JSON.parse(localStorage.getItem('chx'));  
        }

        $.each($("input[name='selected']"), function(){
         localcheckdata.push($(this).val());
       });

I will very appreciate yours helps and if you don't mind could you please let me know what the problem is?

Answer 1

You need to store the values on save, getting the ID of each checkbox element in your dom.

Then once the page loads back, you have to reiterate the values stored in local storage and then get update the dom

Your code had some unknown variables, hence this example below :

 var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {}, $checkboxes = $("#checkbox-container :checkbox"); // on save button clicked $("#save_button").click(function(){ $checkboxes.each(function(){ checkboxValues[this.id] = this.checked; }); localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues)); }); // On page load $.each(checkboxValues, function(key, value) { $("#" + key).prop('checked', value); }); 

 <div id="checkbox-container"> <div> <label for="option1">Option 1</label> <input type="checkbox" id="option1"> </div> <div> <label for="option2">Option 2</label> <input type="checkbox" id="option2"> </div> <div> <label for="option3">Option 3</label> <input type="checkbox" id="option3"> </div> </div>