使用localStorage保存的复选框选择问题

Question

What am trying to archive (to do): Save checkbox choice in localStorage >> so users won't have to check all checkbox again and again.

Problem: I am able to save choices in localStorage but the checkbox are not showing onload, the mechanism seem to also be reversed whereas checkbox checked is captured unchecked etc

Am i missing something?

Here is my code

 // issue: if localStorage saves the checkbox, the input field will not display $('input[type="checkbox"]').click(function () { var inputValue = $(this).attr("value"); $("." + inputValue).toggle(); }); function save() { var checkbox = document.getElementById('activityTitleCb'); localStorage.setItem('activityTitleCb', checkbox.checked); } function load() { var checked = JSON.parse(localStorage.getItem('activityTitleCb')); document.getElementById("activityTitleCb").checked = checked; } function wis() { location.reload(); localStorage.clear() } load(); 

 .searchFilterBox{ display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="chiller_cb"> <input id="activityTitleCb" type="checkbox" class="searchFilterCb" value="activityTitleCb"> <label for="activityTitleCb"> add my name!</label> </div> <br> <div class="col-sm-2 activityTitleCb searchFilterBox"> <input class="form-control input-sm" placeholder="add your name" id="inputsm" type="text"> </div> <br> <input type="button" id="ReserveerButton1" value="save checkbox choices" onclick="save()"/> <input type="button" id="Wisbutton1" value="delete" onclick="wis()"/> 

Answer 1

In function load, try to console.log(checked) to make sure the value is a boolean. You can also try to open browser console to see what value is store on local storage.

Answer 2

Here's a solution. You don't need to press a 'save' button because it saves it to the localStorage automatically.

https://codepen.io/anon/pen/PyKJQq

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
// issue: if localStorage saves the checkbox, the input field will not display

    $(() =>{

         $('input[type="checkbox"]').change(function() {
             if (this.checked) {
                 localStorage.setItem('activityTitleCb', true);
             }    else {

                localStorage.setItem('activityTitleCb', false);
             }
    });

 function save() {
        var checkbox = document.getElementById('activityTitleCb');
        localStorage.setItem('activityTitleCb', checkbox.checked);
      }

      function load() {
        var checked = localStorage.getItem('activityTitleCb') === undefined ? false : localStorage.getItem('activityTitleCb');
        checked = (checked === 'true');
        document.getElementById("activityTitleCb").checked = checked;

      }

      function wis() {
        location.reload();
        localStorage.clear()
      }

      load();
    })
</script>
<style>
        .searchFilterBox{
          display: none;
        }</style>
<div class="chiller_cb">
              <input id="activityTitleCb" type="checkbox" class="searchFilterCb" value="activityTitleCb">
              <label for="activityTitleCb"> add my name!</label>

            </div>


            <br>

    <div class="col-sm-2 activityTitleCb searchFilterBox">

            <input class="form-control input-sm" placeholder="add your name" id="inputsm" type="text">
          </div>


             <br>

                <input type="button" id="ReserveerButton1" value="save checkbox choices" onclick="save()"/>
                <input type="button" id="Wisbutton1" value="delete" onclick="wis()"/>