ygs' blog

jQuery Cookie 插件

作者：

imygs

在

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

更多文章