Show Hide Div über jQuery und HTML5 Localspeicher

Question

Ich habe einen Artikel gefunden https://gist.github.com/jakebresnehan/1983968 für Show ausblenden div mit html5 localstorage. Aber als ich meinen Code anlegte, hat es nicht funktioniert.

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> 

Meine Html

<section class="selection-box brandSectionBox"> 

             <div class="row"> 
              <div class="col-lg-12"> 
               <div class="selection-box-title">Brand</div> 
               <div class="radioStyle clearfix selected brandSection"> 
                <input name="brandRadio" id="brandRadio" value="desktop" type="radio"> 
                <label class="selection-box-label col-lg-12"> 
                 <span class="col-lg-6">Desktop </span> 
                 <span class="col-lg-6 text-right">From $500 </span> 
                </label> 
               </div> 
               <div class="radioStyle clearfix brandSection"> 
                <input name="brandRadio" id="brandRadio" value="laptop" type="radio"> 
                <label class="selection-box-label col-lg-12"> 
                 <span class="col-lg-6">Laptop </span> 
                 <span class="col-lg-6 text-right">From $500 </span> 
                </label> 
               </div> 


              </div> 
             </div> 
</section> 


<section class="firstSelected selectedSelectionBox" style=""> 
             <div class="row"> 
              <div class="col-lg-12"> 
               <div id="selectedfirst" class="selectedItem"></div><div id="changeBox1" class="changeBox"> Change</div> 
              </div> 
             </div> 
</section> 

Mein jQuery-Code

<script> 
    $(document).ready(function($){ 
    if (Modernizr.localstorage) { 

      $(".brandSection").click(function(e) { 
       localStorage.setItem('branding',true); 
       $(".firstSelected").show(); 
       $(".brandSectionBox").hide(); 

      }); 
      $("#selectedfirst, #changeBox1").click(function(e) { 
        //alert(test); 
        localStorage.setItem('branding',true); 
        localStorage.clear(); 
        $(".brandSectionBox").show(); 
        $(".firstSelected").hide(); 
      }); 

      var is_brand = localStorage.getItem('branding'); 
      if(is_brand){ 
        console.log('localStorage') 

        $(".firstSelected").hide(); 
      } 

      if(!is_brand){ 
        console.log('no localStorage'); 
        $(".brandSectionBox").show(); 
      } 
      } 
     });  
    </script> 

Ich bin mir nicht sicher, wo ich Fehler mache.

Answer 1

Ziel der https://gist.github.com/jakebresnehan/1983968 ist

das Ein-/Ausblenden der Elemente erinnern, wenn Sie die Seite

In Ihrem Code vor

• .brandSection aktualisieren -> klicken ->.brandSectionBox verstecken + .firstSelected anzeigen + branding: true in localStorage
• #changeBox1 -> klicken -> local clear + .brandSectionBox Show + .firstSelected hide

Also, wenn Sie die Seite, während des folgenden Richter aufzufrischen, sie zeigen beide defaultly

• , wenn Sie das haben local branding ->.brandSectionBoxhide

• kein localStroage ->.firstSelectedverstecken

Schließlich sollten Sie den Code nach sein:

$(document).ready(function($){ 
    if (Modernizr.localstorage) { 
    $(".brandSection").click(function(e) { 
     localStorage.setItem('branding',true); 
     $(".firstSelected").show(); 
     $(".brandSectionBox").hide(); 

    }); 
    $("#selectedfirst, #changeBox1").click(function(e) { 
     localStorage.clear(); 
     $(".brandSectionBox").show(); 
     $(".firstSelected").hide(); 
    }); 

    var is_brand = localStorage.getItem('branding'); 

    if(is_brand){ 
     console.log('localStorage') 
     $(".brandSectionBox").hide(); 
    } 

    if(!is_brand){ 
     console.log('no localStorage'); 
     $(".firstSelected").hide(); 
    } 
    } 
});