在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 });