第一次接触 JavaScript 的 Cookie 是在大三的时候，当时用 WordPress 模仿“最土”的团购模板，也就是美团第一个版本，因为后台的东西不太懂，也不会编插件，于是乎，除了评论表单项目增加了内容外，其余功能一概前台处理。当时连清除浮动也不知道是什么玩意，却糊里糊涂的在 WordPress 上实现了团购功能，当然，没有支付功能，因为，是校内团购，给现金，哈哈。
言归正传，那时候的团购网站基本都一个样，首页会显示一个提示框，右上角有关闭按钮，我要实现的就是关闭然后不再显示的功能，我就想到了用 Cookie 来记住这个动作。现在我看回当时的代码，我看不明白了…
function turnoff(obj) {
var the_date = new Date("December 21, 2012");
var the_cookie_date = the_date.toUTCString();
document.cookie = "guide_status=guide_close;expires=" + the_cookie_date;
document.getElementById(obj).style.display = "none";
}
function readcookie(the_info) {
var the_cookie = document.cookie;
var the_cookie = unescape(the_cookie);
var pair_cookie = the_cookie.split(";");
var property_value = "";
for (loop = 0; loop < pair_cookie.length; loop++) {
property_value = pair_cookie[loop];
var broken_info = property_value.split("=");
var the_property = broken_info[0];
var the_value = broken_info[1];
the_info[the_property] = the_value;
if (the_info[the_property] == "guide_close") document.getElementById('guidebar').style.display = "none";
}
}
var cookie_information = new Array();
学习 JavaScript 可以扎实基础，使用 jQuery 可以简单快速实现功能。于是乎，我现在使用 jQuery 的 Cookie 插件，实现记住显示隐藏边栏的功能。这个插件两年前，我就使用过，也是实现相同的功能，我翻回当时的代码，稍作修改，就可以工作了。当我想把代码改得更完美的时候，问题却出来了，我花了一个下午的时间来调，一直找不到原因，甚至我把代码重写也不能正常使用…这是闹哪样，搞得我脖子都酸痛了。后来，在下班前糊里糊涂又搞好了，原因是，变量赋值问题，我现在说不出具体的，日后再说吧。上一下代码。
$(function() {
$('.sidebar-switch a').click(function() {
if ($('#sidebar').is(':visible')) {
$.cookie('sidebar', 'hide');
$('#sidebar').fadeOut().parent().animate({width: "640px"},600).removeClass('container-wide');
$(".sidebar-switch a").text("SidebarOFF");
}
else {
$.cookie('sidebar', 'show');
$('#sidebar').fadeIn().parent().animate({width: "840px"},600);
$(".sidebar-switch a").text("SidebarON");
};
});
var thesidebar = $.cookie("sidebar");
if (thesidebar == "show") {
$('#sidebar').show().parent().addClass('container-wide');
$(".sidebar-switch a").text("SidebarON");
}
});
由于模板结构不同，HTML 、CSS、jQuery 都要作改动才能使用。
言归正传，jQuery Cookie 插件的使用方法。插件主页：http://plugins.jquery.com/cookie/，使用前加载像加载 jQuery 一样加载插件是必须的。
创建 cookie:
$.cookie('the_cookie', 'the_value');
创建临时 cookie, 7 天之后过期:
$.cookie('the_cookie', 'the_value', { expires: 7 });
创建临时 cookie, 7 天之后过期，并且作用于整个站点的:
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });
读取 cookie:
$.cookie('the_cookie'); // => "the_value" $.cookie('not_existing'); // => undefined
读取所有 cookies:
$.cookie(); // => { "the_cookie": "the_value", "...remaining": "cookies" }
删除 cookie:
// 存在 Cookie 返回 true, 否则返回 false... $.removeCookie('the_cookie');
// 写法跟上面一样... $.removeCookie('the_cookie', { path: '/' });