学习笔记： JavaScript/JQuery 的cookie操作

cookie是网页存储到用户硬盘上的一小段信息。最常见的作用是判断用户是否登录、保存偏好设置等。我用到这个是写扫雷时，需要用cookie保存用户的设置，如行、列等。功能已具，笔而记之。

 

cookie具有特定的格式——

        cookiename=cookievalue; expires=epirationDateGMT; path=URL; domin=siteDomin; secure: boolean

 

可以看出由分号隔开的几部分——第一部分是cookie的名称和值，这是每一个cookie中必须有的。其余部分都是可选的：第二部分是cookie的过期时间，到了这个时间浏览器会自动将其删除，如果没有这部分则默认是在关闭浏览器时将其删除。第三部分允许在cookie中存储一个URL，第四部分存储一个域值（这个基本不用管，浏览器会将当前网页的地址存入），第五部分是一个布尔值，为ture时要求传输一个安全协议，如https。

 

一般我们只需要讨论第一部分和第二部分，即值和过期时间。

 

javascript的写cookie操作示例：

var expireDate = new Date(); // 获取当前时间 expireDate.setDate(expireDate.getDate()+1); //设置日期为一天后 var cookieValue = "hello"; document.cookie = "aCookie=" + cookieValue +"; expires="+expireDate.toGMTString();//写cookie alert(document.cookie);

这段代码执行完之后就会创建一个cookie，名称为aCookie,值为"hello",过期时间为一天后。最后一句会打印出这个cookie的内容

可以在谷歌浏览器中查看到它的信息：（谷歌浏览器不支持本地网页文件的cookie，要用它操作cookie必须要放到服务器上！！早先不知道这个，Chrome中没出想要的结果，我费劲心思纠结好久好久……囧）
     名称： aCookie
     内容： hello
     域： 127.0.0.1 
     路径： /Test2
     发送： 各种连接
     可访问脚本的 Cookie： 是
     已创建： 2011年4月27日星期三下午8:37:12
     过期时间： 2011年4月28日星期四下午8:37:12

 

一个页面是可以有多个cookie的，它们会被存放在同一个文件中，所以形如 aCookie=”Hello”; anotherCookie=”world” 是一个合法的cookie

cookie本质上是一段字符串，所以可以用任何操作字符串的方法去操作它， 对于上面一个cookie，可以用代码：var string = document.cookie.split("=")[1].split(";")[0]; 获取aCookie的值"hello”.

 

当只设置一个cookie时，存取操作都不复杂，但是当一个页面中存在多个cookie时，这个操作就会变的优点复杂了，如上面得到"hello”的字符串操作就已经略显复杂了。

这时候我们可以借助JQuery来实现更优雅的操作。

 

JQuery的一个小插件~只有1K多的，名称即为Cookie，包含且只包含如下代码——

jQuery.cookie = function(name, value, options) { if (typeof value != 'undefined') { // name and value given, set cookie options = options || {}; if (value === null) { value = ''; options.expires = -1; } var expires = ''; if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { var date; if (typeof options.expires == 'number') { date = new Date(); date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); } else { date = options.expires; } expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE } // CAUTION: Needed to parenthesize options.path and options.domain // in the following expressions, otherwise they evaluate to undefined // in the packed version for some reason... var path = options.path ? '; path=' + (options.path) : ''; var domain = options.domain ? '; domain=' + (options.domain) : ''; var secure = options.secure ? '; secure' : ''; document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); } else { // only name given, get cookie var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } };

 

只要将这段代码加载之后，便可以使用它的方法了（加载的方法不用多说了吧？最简单的是你直接把它拷到你所用的jQuery中；或者把这段单独存为一个js文件，在html文件中引用……）。

很方便的操作，用法大致如下：

 

$.cookie('the_cookie'); //读取Cookie值 $.cookie(’the_cookie’, ‘the_value’); //设置cookie的值 $.cookie(’the_cookie’, ‘the_value’, {expires: 7, path: ‘/’, domain: ‘jquery.com’, secure: true});//新建一个cookie 包括有效期 路径 域名等 $.cookie(’the_cookie’, ‘the_value’); //新建cookie $.cookie(’the_cookie’, null); //删除一个cookie

 

其实可以看到，这个插件中只有一个方法，而用参数的不同来实现不同的操作。

 

一个示例——
/* 设开始时页面不存在cookie*/ $.cookie("cookie1","hello");//新建一个cookie，名称为cookie1，值为"hello",有效期到浏览器关闭 $.cookie("cookie2","word",{expires:2});//新建一个cookie，名称cookie2,值"word",有效期到2天后 var str = $.cookie("cookie1");//将cookie1的值"hello"赋给变量 str $.cookie("cookie2",null);//删除cookie2 $.cookie("cookie1","bye");//将cookie1的值修改为"bye"

 

 

怎么样，除去了繁琐的字符串操作，是不是方便了许多？

这些操作的原理并不复杂，插件的代码就只有上面那些，可以不困难地看明白。

 

若有不正确之处，敬请指正，不胜感激。 

最后再次提醒——Chrome doesn't support cookies for local files …… 

我在纠结谷歌浏览器的cookie怎么存不上之后，看到了这句话，有吐血的心。