多个复选框的本地存储

Question

所以我有一个模式，用户可以在其中选中一些复选框。如果选中该复选框，则 div 应该出现在正常页面上。

我想本地存储复选框，如果我重新加载页面并选中复选框，则 div 应该仍然可见。我已经编写了显示/隐藏 div 的代码，但我仍然需要本地存储，但我真的找不到如何为多个复选框执行此操作。 如何实现本地存储？

HTML：

<div class="container-fluid">
    <div id="mob1-div" class="row hide-div">Mobilisern1</div>
    <div id="rek1-div" class="row hide-div">rekoefeningen1</div>
    <div id="stab1-div" class="row hide-div">stabiliseren1</div>
    <div id="ver1-div" class="row hide-div">versterken1</div>

<button id="myBtn">Open Modal</button>

<div id="myModal" class="modal">

  <div class="modal-content">
        <div class="buttons">
                <div class="row"><div class="col-xs-6 text-center"><button  class="showMob" target="1">Mobiliseren</button></div>
                <div class="col-xs-6"><button  class="showVer" target="2">Stabiliseren</button></div></div>
                <div class="row"><div class="col-xs-6 text-center"><button  class="showStab" target="3">Rekken</button></div>
                <div class="col-xs-6"><button  class="showRek" target="4">Verserken</button></div>
        </div>

        <div id="mob1" class="targetDiv">Mobiliseren 1<input type="checkbox" class="checkbox" data-ptag="mob1-div"/></div>
        <div id="rek1" class="targetDiv">Rekken 1<input type="checkbox" class="checkbox" data-ptag="rek1-div"/></div>
        <div id="stab1" class="targetDiv">Stabilisern 1<input type="checkbox" class="checkbox" data-ptag="stab1-div"/></div>
        <div id="ver1" class="targetDiv">Versterken 1<input type="checkbox" class="checkbox" data-ptag="ver1-div"/></div>
        <button class="close">Opslaan</button>
  </div>
</div>
</div>

Javascript/Jquery：

window.addEventListener('load', function() {

  var modal = document.getElementById('myModal');

  var btn = document.getElementById("myBtn");

  var span = document.getElementsByClassName("close")[0];

  btn.onclick = function() {
    modal.style.display = "block";
  }
  span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
});
$(function(){
    $('.hide-div').hide();
    $('.checkbox').change(function(){
        if($('.checkbox:checked').length==0){
            $('.hide-div').hide();
        }else{
            $('.hide-div').hide();
            $('.checkbox:checked').each(function(){
            $('#'+$(this).attr('data-ptag')).show();

            });
        }
    });
});
$(function(){
        $('.targetDiv').hide();
        $('.showMob').click(function(){
              $('.targetDiv').hide();
              $('#mob1, #mob2, #mob3, #mob4').show();
        });
        $('.showRek').click(function(){
              $('.targetDiv').hide();
              $('#rek1').show();
        });
        $('.showStab').click(function(){
              $('.targetDiv').hide();
              $('#stab1').show();
        });
        $('.showVer').click(function(){
            $('.targetDiv').hide();
            $('#ver1, #ver2, #ver3, #ver4').show();
        });
});

P.S.：我只是 javascript/jquery 的初学者

Answer 1

这就是我想出的。我必须更改 html 才能使用我的代码。 你可以在这里看到这一切：https://jsfiddle.net/bindrid/xu9modma/41/

  $(function($){


      // get saved state
      var storage = localStorage.divstate;
      if(!storage){
          // if no saved state, make new one and initialize everything to hidden.
          storage = {'mob1-div':"none", "rek1-div":"none", "stab1-div":"none", "ver1-div":"none"};
          localStorage.divstate =  JSON.stringify(storage);
      }
      else {
          storage = JSON.parse(storage);
      }
          $("#myModal").hide();

      // set state of divs
      $("#mob1-div").css("display", storage["mob1-div"]);
      $("#rek1-div").css("display", storage["rek1-div"]);
      $("#stab1-div").css("display", storage["stab1-div"]);
      $("#ver1-div").css("display", storage["ver1-div"]);

      // intialized the state of the checkboxes
      $(".checkboxes div").hide();
      $(".checkbox").each(function () {
          var cb = $(this);
          var data = cb.data("ptag");
          this.checked = !(storage[data] == "none")
      });

      $("#myBtn").on("click", function(){$("#myModal").show()});
      $("#btnCloseModal").on("click", function(){$("#myModal").hide()});
      $(".buttons button").on("click", function(evt){
          var ck = $(evt.target).data("target");
          $(".checkboxes div").hide();
          $("#" +ck).show();
      });

      $(".checkbox").on("click", function(evt){
           var cb = $(evt.target);
          var div = $("#" + cb.data("ptag"));
          div.toggle(evt.target.checked);
          var storage = JSON.parse(localStorage.divstate);
          storage[cb.data("ptag")] = evt.target.checked?"":"none";
          localStorage.divstate = JSON.stringify(storage);
      });

  });