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