jQuery Cookie 插件

第一次接触 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: '/' });