學習筆記： 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怎麼存不上之後，看到了這句話，有吐血的心。