Localstorage из нескольких флажков

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 .: Я просто новичок в 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); 
     }); 

    });