多個複選框的本地存儲

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); 
     }); 

    });