複数のチェックボックスのローカル保存

Question

私はユーザがいくつかのチェックボックスをチェックできるモーダルを持っています。チェックボックスをオンにすると、通常のページにdivが表示されます。

チェックボックスをローカルに保存したいのですが、ページをリロードしてチェックボックスをオンにしても、divは引き続き表示されます。私は既にdivを表示/非表示のコードを作ったが、私はまだlocalstorageが必要ですが、私は実際に複数のチェックボックスのためにこれを行う方法を見つけることができません。 どのようにしてlocalstorageを達成できますか？

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：私はこれは私が思い付いたものですジャバスクリプト/ 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); 
     }); 

    });