在WOAHbar jQuery上設置Cookie以記住以前的狀態

Question

我正在使用WOAHbar，它是Hello Bar的免費替代品。我在這裏：

http://blog.jobdeals.com/2011/12/free-hellobar-com-alternative-source-code/

這真的真棒。我希望它做的唯一事情是記住用戶在訪問另一個帖子或頁面時選擇的狀態。我知道你可以用cookies做到這一點，我只是不知道如何。這裏是jQuery的：

<script type="text/javascript"> 
var stub_showing = false; 

function woahbar_show() { 
    if(stub_showing) { 
     $('.woahbar-stub').slideUp('fast', function() { 
     $('.woahbar').show('bounce', { times:3, distance:15 }, 100); 
     $('body').animate({"marginTop": "2.4em"}, 250); 
     }); 
    } 
    else { 
     $('.woahbar').show('bounce', { times:3, distance:15 }, 100); 
     $('body').animate({"marginTop": "2.4em"}, 250); 
    } 
} 

function woahbar_hide() { 
    $('.woahbar').slideUp('fast', function() { 
     $('.woahbar-stub').show('bounce', { times:3, distance:15 }, 100); 
     stub_showing = true; 
    }); 

    if($(window).width() > 1024) { 
     $('body').animate({"marginTop": "0px"}, 250); // if width greater than 1024 pull up the body 
    } 
} 

$().ready(function() { 
    window.setTimeout(function() { 
    woahbar_show(); 
}, 5000); 
}); 
</script> 

而這裏的HTML：

<div class="woahbar" style="display:none"> 
    <span> 
    Want access to the largest inventory of storage auctions online? <a class="woahbar-link" href="http://storageunitauctionlist.com/register-signup.php" target="_blank">Sign Up Today!</a> 
    </span> 
    <a class="close-notify" onclick="woahbar_hide();"><img class="woahbar-up-arrow" src="<?php bloginfo("template_url"); ?>/images/woahbar-up-arrow.png"></a> 
</div> 
<div class="woahbar-stub" style="display:none"> 
    <a class="show-notify" onclick="woahbar_show();"><img class="woahbar-down-arrow" src="<?php bloginfo("template_url"); ?>/images/woahbar-down-arrow.png"></a> 
</div> 

任何幫助，非常感謝！

編輯：

我試着用jQuery Cookie Plugin添加cookie。我是新來的jQuery，所以我不真正知道我在做什麼錯：

<script type="text/javascript"> 
var stub_showing = false; 
var state = 'updown'; 

function woahbar_show() { 
    if(stub_showing) { 
     $('.woahbar-stub').slideUp('fast', function() { 
     $('.woahbar').show('bounce', { times:3, distance:15 }, 100); 
     $('body').animate({"marginTop": "2.4em"}, 250); 
     }); 
    } 
    else { 
     $('.woahbar').show('bounce', { times:3, distance:15 }, 100); 
     $('body').animate({"marginTop": "2.4em"}, 250); 
    } 
} 

$.cookie('state', 'updown', { expires: 7 }); 

function woahbar_hide() { 
    $('.woahbar').slideUp('fast', function() { 
     $('.woahbar-stub').show('bounce', { times:3, distance:15 }, 100); 
     stub_showing = true; 
    }); 

    if($(window).width() > 1024) { 
     $('body').animate({"marginTop": "0px"}, 250); // if width greater than 1024 pull up the body 
    } 
} 

$().ready(function() { 
    window.setTimeout(function() { 
    woahbar_show(); 
}, 5000); 


}); 
</script> 

Answer 1

您可以使用jQuery cookie plugin和state的值存儲像餅乾裏面：

在你的腳本的頂部聲明要用來存儲的cookie，如變量：

var state; // declare the variable 

後，用戶輸入state

某處後，在代碼中設置的值

$.cookie('state', '{the input state value}', { expires: 7 });