通过jQuery和HTML5显示隐藏div本地存储

Question

我发现文章https://gist.github.com/jakebresnehan/1983968用于显示隐藏div与html5 localstorage。但是，当我把我的代码，它不起作用。

<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> 

我的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> 

我的jQuery代码

<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> 

我不知道，我正在做的错误。

Answer 1

的https://gist.github.com/jakebresnehan/1983968的目的是

记得元素的显示/隐藏，当你刷新页面

在你的代码之前

• .brandSection - >点击 - >.brandSectionBox hide + .firstSelected show + branding: true in localStorage
• #changeBox1 - >点击 - > localStorage的明确+ .brandSectionBox秀+ .firstSelected隐藏

所以，当你刷新以下法官中的页面，他们都defaultly显示

• 当你有localStorage的branding - >.brandSectionBox隐藏

• 没有localStroage - >.firstSelected隐藏

毕竟，你的代码应该是后：

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