recuperare lo stato salvato per un insieme di caselle di memoria locale dopo ricaricare la pagina

Question

Ho una collezione di 20 caselle come questo qui:

<div class="cbcell"> 
<input type="checkbox" class="checkbox" id="home_swimming_pool" name="Basen" value="35"> Basen 
</div> 
<div class="cbcell"> 
<input type="checkbox" class="checkbox" id="home_sauna" name="Sauna" value="45"> Sauna 
</div>     

con il seguente codice Mi risparmio e la rimozione dello stato casella di controllo nella memoria locale che funziona molto bene, anche la funzione filtro di dataTables funziona correttamente.

<script type="text/javascript" > 
$(':checkbox').click(function(){ 
     var name = $(this).attr('name'); 
     var value = $(this).val(); 

      if($(this).is(':checked')){ 

      console.log(name, value); // <- debug 
      oTable.fnFilter(name, value,false,true,false,true); 
      localStorage.setItem(this.name,'checked'); 

      } else { 
      console.log(name, value); // <- debug 
      oTable.fnFilter('',value,false,true,false,true); 
      localStorage.removeItem(this.name); 
      } 
     //}) 
     }); 
</script> 

Ti prego, dimmi come recuperare lo stato di ogni casella di controllo dopo che una pagina è stata ricaricata. Ho provato già con diverse funzioni e il mio ultimo stand è:

$(document).ready(function() { 

         if (localStorage.getItem(this.value) == 'checked'){ 
          $(this).attr("checked",true) 
         } 

        }) 

qualsiasi aiuto è molto apprezzato.

Answer 1

Prova questo .ready

$(':checkbox').each(function() { 
    $(this).prop('checked',localStorage.getItem(this.name) == 'checked'); 
}); 

In $ (document)() funzione, this si riferisce al documento, non una casella di controllo, come nelle $ (': Casella di controllo'). Click(). Inoltre, se ci pensi, hai davvero bisogno di un modo per scorrere le tue checkbox. Questo è dove .each() viene in All'interno delle $ (': casella di controllo').. Ogni funzione(), this farà riferimento a una specifica casella di controllo

Inoltre sarebbe una buona idea per verificare che localStorage è in realtà supportato dal browser su cui è in esecuzione il codice, altrimenti riceverai errori.

un modo semplice è quello di avvolgere tutto in una versione if (window.localStorage) { /* code here */}

---

Migliorata

if (window.localStorage) { 
    $('.cbcell').on('click',':checkbox',function(){ 
     var name = this.name; 
     var value = this.value; 

      if($(this).is(':checked')){ 
      oTable.fnFilter(name, value,false,true,false,true); 
      //shorthand to check that localStorage exists 
      localStorage && localStorage.setItem(this.name,'checked'); 

      } else { 
      oTable.fnFilter('',value,false,true,false,true); 
      //shorthand to check that localStorage exists 
      localStorage && localStorage.removeItem(this.name); 
      } 
    }); 


    $(document).ready(function() { 
     $(':checkbox').each(function() { 
      $(this).prop('checked',localStorage.getItem(this.name) == 'checked'); 
     }); 
    }); 
} 

---

Infine mi permetto di suggerire trascorrere del tempo passando attraverso il eccellenteTry jQuery esercitazione allo http://try.jquery.com/