Save the checked checkboxes and load them when the page is reloaded

I would like the checkboxes that have been checked to be saved and loaded whenever the page is reloaded or opened again, in addition, icons referring to the options will be presented in their place.

I made a function in java script that loads the functions when the page is opened, using localStorage but it is not working. Could you please help me?

New.html 

 <div class=" tab-pane active grid-container" id="biblio" align="center">

        <div id= "consulta0" class="toggle div-inline"  style="display:" > 
          <input type="checkbox" id="consultar-acervo" data-id="consultar-acervo"  name="toggle">
          <label for="consultar-acervo"></label>
          <p class= "nomeToogle"> Consultar Acervos</p>
        </div>

        <div id= "consulta1" class="toggle div-inline" style="display:" >
          <input type="checkbox" id="consultar-reserva" data-id="consultar-reserva" name="toggle"> 
          <label for="consultar-reserva"></label>
          <p class= "nomeToogle"> Consultar Reservas</p> 
        </div>

        <div id= "consulta2" class="toggle div-inline" style="display: ">
          <input type="checkbox" id="renovar-emprestimo" data-id="renovar-emprestimo" name="toggle">
          <label for="renovar-emprestimo"></label>
          <p class= "nomeToogle">Renovar Empréstimos</p> 
        </div>

        <!-- Icones de Biblioteca-->

          <div id = "zoom0" class="div-inline zoom" style="display:none">
          <a href="https://siga.ufvjm.edu.br/index.php?module=biblioteca&mode=compatibilidade&action=main:pesquisasimples" data-toggle="tooltip" data-placement="top" title="Consultar Acervo" target=“_blank”>
            <img src="../images/biblioteca/consultar-acervo.png" style="width:40%" data-id="consultar-acervo" name="icons">
          </a>
          <p class= "nomeToogle"> Consultar Acervos</p>
        </div>

        <div id = "zoom1" class="div-inline zoom" style="display:none">
          <a href="http://siga.ufvjm.edu.br/index.php?module=biblioteca&mode=compatibilidade&action=main:resusuario" data-toggle="tooltip" data-placement="top" title="Consultar Reserva" target=“_blank”>
            <img src="../images/biblioteca/consultar-reserva.png" style="width:40%" data-id="consultar-reserva" name="icons">
          </a>
          <p class= "nomeToogle"> Consultar Reservas</p>
        </div>

        <div id = "zoom2" class="div-inline zoom" style="display:none">
          <a href="http://siga.ufvjm.edu.br/index.php?module=biblioteca&mode=compatibilidade&action=main:renovusuario" data-toggle="tooltip" data-placement="top" title="Renovar Empréstimo" target=“_blank”>
            <img src="../images/biblioteca/renovar-emprestimo.png" style="width:40%" data-id="renovar-emprestimo" name="icons">
          </a>
          <p class= "nomeToogle"> Renovar Empréstimo</p>
        </div>

    </div>

Functions.js 

        window.onload = function() { //executa o JavaScript imediatamente após a página ser carregada

    function checar(){

        var checa = document.getElementsByName("toggle");
        var img = document.getElementsByName("icons");


        var numElementos = checa.length;
        var i = 0;

        while (i <= numElementos){

            if(checa[i].checked == true){

                var dataCheckbox = checa[i].dataset.id;
                var dataImage = img[i].dataset.id;

                if (dataCheckbox[i] == dataImage[i]){

                   document.getElementById("zoom"+i).style.display = 'inline-block'; // mostra imagem
                   document.getElementById("consulta"+i).style.display = 'none'; // oculta checkbox marcada
                   document.getElementById("aplica").style.display = 'none'; // oculta botão aplicar
                   document.getElementById("edita").style.display = 'inline'; // mostra botão editar
                   document.getElementById("cancela").style.display = 'none'; // oculta botão cancela

                }

        //a partir daqui salva os checkbox marcados pelos usuários

        var opc = localStorage.getItem("checa[" + i + "]"); //verifica se há alguma opc no localStorage

        if (opc == null){
            break;
            }
        alert("deu");

        //grava as opc no localStorage
        localStorage.setItem("checa["+ indice +"]", checa);
        localStorage.setItem("img["+ indice +"]", img);
        indice++

            }
            else{
                document.getElementById("consulta"+i).style.display = 'none'; // oculta checkbox marcada
            }

            i++;
         }
    }

    document.getElementById('aplica').onclick = checar; 



            //função que carrega os ícones na tela de acordo com as opções salvas 
            var checa = document.getElementsByName("toggle");
            var img = document.getElementsByName("icons");
            var numElementos = checa.length;
            var b=0;

            for (i=0; i <= numElementos; i++){
                var opc = localStorage.getItem("checa[" + i +"]"); //verifica se há opc
                if(opc == null){
                    break;
                }

                var dataCheckbox = checa[i].dataset.id;
                var dataImage = img[i].dataset.id;

                if (dataCheckbox[i] == dataImage[i]){

                    document.getElementById("zoom"+i).style.display = 'none'; // oculta imagem
                    document.getElementById("consulta"+i).style.display = 'inline-block'; // mostra checkbox marcada
                    document.getElementById("aplica").style.display = 'block'; // mostra botão aplicar
                    document.getElementById("edita").style.display = 'none'; // oculta botão editar
                    document.getElementById("cancela").style.display = 'inline-block'; // mostra botão cancela

                }

                else{
                    document.getElementById("consulta"+i).style.display = 'inline-block'; // mostra checkbox marcada
                }


            }

};
Author: MStos, 2018-06-25
Source

1 answers

You can save the marked items in the localStorage like this: 

var ls = localStorage.getItem("box");
if(ls){
   var b = ls.split(",");
   for(var x=0; x<b.length; x++){
      document.getElementById(b[x]).checked = true;
      document.getElementById(b[x]).parentNode.style.display = "none";
      document.querySelector("[data-id='"+b[x]+"']").parentNode.parentNode.style.display = "block";
   }
   var checados = b;
}else{
   var checados = [];
}

var boxes = document.querySelectorAll("#biblio div [type='checkbox']");
for(var x=0; x<boxes.length; x++){
   boxes[x].onchange = function(){
      var idx = checados.indexOf(this.id);
      if(this.checked && !~idx){
         checados.push(this.id);
         document.getElementById(this.id).parentNode.style.display = "none";
         document.querySelector("[data-id='"+this.id+"']").parentNode.parentNode.style.display = "block";
      }else{
         checados.splice(idx, 1);
      }
      localStorage.setItem("box", checados);
   }
}

When reloading the page, checkboxes will still be checked.

Remove data-id from checkboxes that are not unnecessary since id has the same value.

 1
Author: Sam, 2018-06-25 18:44:30