jquery - onclick jquery slidetoggle default state from cookie

Question

by default my div element #bannerbox displays as normal, I'm using the following code to hide the div element.

<div id="toggleclose">
    <a href="#" class="closebutton" onclick="jQuery('#bannerbox').slideToggle('normal');" title="Close"><span class="hidespan">Close</span></a>
</div>

What i would like to do is when the button is clicked, as well as the current functionality, have the state then saved to cookie so that the next time the page is loaded the visibility of the div element is retained from the last state saved to the cookie.

This is the current code I'm working with, which does not currently work.

<script type="text/javascript">
    $(document).ready(function(){
         var openToggle = getCookie("open") || false; 
         if ( openToggle )    
              $("#bannerbox").show();
         else 
              $("#bannerbox").hide();

         $('.closebutton').click(function() {    
              var closed = $("#bannerbox").is(":none");    
              if ( closed )       
                   $("#bannerbox").show();    
              else        
                   $("#bannerbox").hide();    

              setCookie("open", !closed, 365 );
         });
    });
</script>

Answer 1

看看这个：http ://coding.smashingmagazine.com/2010/10/11/local-storage-and-how-to-use-it/

$(document).ready(function(){
     var $banner = $("#bannerbox");
     localStorage.getItem('bannerActive') ? $banner.show() : $banner.hide();

     $('.closebutton').click(function() {    
          $banner.toggle();        
          localStorage.setItem('bannerActive', $banner.is(":visible");
     });
});