Javascript操作Cookie

本文系轉(zhuǎn)載，但是找不到原文的地址了。:(

什么是Cookie

“cookie是存儲(chǔ)于訪問者的計(jì)算機(jī)中的變量。每當(dāng)同一臺(tái)計(jì)算機(jī)通過瀏覽器請(qǐng)求某個(gè)頁面時(shí)，就會(huì)發(fā)送這個(gè) cookie。你可以使用 JavaScript 來創(chuàng)建和取回cookie的值?！?- w3school

cookie是訪問過的網(wǎng)站創(chuàng)建的文件，用于存儲(chǔ)瀏覽信息，例如個(gè)人資料信息。

從JavaScript的角度看，cookie就是一些字符串信息。這些信息存放在客戶端的計(jì)算機(jī)中，用于客戶端計(jì)算機(jī)與服務(wù)器之間傳遞信息。

在JavaScript中可以通過document.cookie來讀取或設(shè)置這些信息。由于cookie多用在客戶端和服務(wù)端之間進(jìn)行通信，所以除了JavaScript以外，服務(wù)端的語言（如PHP）也可以存取cookie。

Cookie基礎(chǔ)知識(shí)

• cookie是有大小限制的，每個(gè)cookie所存放的數(shù)據(jù)不能超過4kb，如果cookie字符串的長度超過4kb，則該屬性將返回空字符串。
• 由于cookie最終都是以文件形式存放在客戶端計(jì)算機(jī)中，所以查看和修改 cookie 都是很方便的，這就是為什么常說cookie不能存放重要信息的原因。
• cookie是存在有效期的。在默認(rèn)情況下，一個(gè)cookie的生命周期就是在瀏覽器關(guān)閉的時(shí)候結(jié)束。如果想要cookie能在瀏覽器關(guān)掉之后還可以使用，就必須要為該cookie設(shè)置有效期，也就是cookie的失效日期。
• alert(typeof document.cookie)結(jié)果是String。
• cookie有域和路徑這個(gè)概念。域就是domain的概念，因?yàn)闉g覽器是個(gè)注意安全的環(huán)境，所以不同的域之間是不能互相訪問 cookie的(當(dāng)然可以通過特殊設(shè)置的達(dá)到cookie跨域訪問)。路徑就是routing的概念，一個(gè)網(wǎng)頁所創(chuàng)建的cookie只能被與這個(gè)網(wǎng)頁在同一目錄或子目錄下得所有網(wǎng)頁訪問，而不能被其他目錄下得網(wǎng)頁訪問。
• 其實(shí)創(chuàng)建cookie的方式和定義變量的方式有些相似，都需要使用cookie名稱和cookie值。同個(gè)網(wǎng)站可以創(chuàng)建多個(gè)cookie，而多個(gè)cookie可以存放在同一個(gè)cookie文件中。

Cookie常見問題

• cookie 存在兩種類型：
  • 你瀏覽的當(dāng)前網(wǎng)站本身設(shè)置的cookie。
  • 來自在網(wǎng)頁上嵌入廣告或圖片等其他域來源的第三方cookie(網(wǎng)站可通過使用這些cookie跟蹤你的使用信息)。
• 剛剛基礎(chǔ)知識(shí)里面有說到cookie生命周期的問題，其實(shí)cookie大致可分為兩種狀態(tài)：
  • 臨時(shí)性質(zhì)的cookie。當(dāng)前使用的過程中網(wǎng)站會(huì)儲(chǔ)存一些你的個(gè)人信息，當(dāng)瀏覽器關(guān)閉后這些信息也會(huì)從計(jì)算機(jī)中刪除。
  • 設(shè)置失效時(shí)間的cookie。就算瀏覽器關(guān)閉了，這些信息業(yè)依然會(huì)在計(jì)算機(jī)中。如登錄名稱和密碼，這樣無須在每次到特定站點(diǎn)時(shí)都進(jìn)行登錄。這種cookie可在計(jì)算機(jī)中保留幾天、幾個(gè)月甚至幾年。
• cookie 有兩種清除方式：
  • 通過瀏覽器工具清除cookie(有第三方的工具，瀏覽器自身也有這種功能)。
  • 通過設(shè)置cookie的有效期來清除 cookie。
  • 注：刪除cookie有時(shí)可能導(dǎo)致某些網(wǎng)頁無法正常運(yùn)行
• 瀏覽器可以通過設(shè)置來接受和拒絕訪問cookie。
• 出于功能和性能的原因考慮，建議盡量降低cookie的使用數(shù)量，并且要盡量使用小cookie。
• 關(guān)于cookie編碼的細(xì)節(jié)問題將會(huì)在cookie高級(jí)篇中單獨(dú)介紹。
• 假如是本地磁盤中的頁面，chrome的控制臺(tái)是無法用JavaScript讀寫操作cookie的，解決辦法…換一個(gè)瀏覽器^_^。

Cookie基礎(chǔ)用法

簡單的存取操作

在使用JavaScript存取cookie時(shí)，必須要使用Document對(duì)象的cookie屬性。
一行代碼介紹如何創(chuàng)建和修改一個(gè)cookie，

document.cookie = 'username=Darren';

以上代碼中username表示cookie名稱，Darren表示這個(gè)名稱對(duì)應(yīng)的值。假設(shè)cookie名稱并不存在，那么就是創(chuàng)建一個(gè)新的cookie；如果存在就是修改了這個(gè)cookie名稱對(duì)應(yīng)的值。如果要多次創(chuàng)建cookie，重復(fù)使用這個(gè)方法即可。

cookie的讀取操作

要精確的對(duì)cookie進(jìn)行讀取其實(shí)很簡單，就是對(duì)字符串進(jìn)行操作。從w3school上copy這段代碼來做分析，

function getCookie(c_name) {
    // 先查詢cookie是否為空，為空就return
    if (document.cookie.length > 0) {　　
        // 通過String對(duì)象的indexOf()來檢查這個(gè)cookie是否存在，不存在就為 -1
        c_start = document.cookie.indexOf(c_name + "=")；
        if (c_start !== -1) {
            //最后這個(gè)+1其實(shí)就是表示"="號(hào)啦，這樣就獲取到了cookie值的開始位置
            c_start = c_start + c_name.length + 1;　　
            // 其實(shí)我剛看見indexOf()第二個(gè)參數(shù)的時(shí)候猛然有點(diǎn)暈，后來想起來表示指定的開始索引的位置...這句是為了得到值的結(jié)束位置。因?yàn)樾枰紤]是否是最后一項(xiàng)，所以通過";"號(hào)是否存在來判斷
            c_end=document.cookie.indexOf(";",c_start);
            if (c_end === -1) ｛
                c_end = document.cookie.length；
            }
            // 通過substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基礎(chǔ)，想了解的可以搜索下，在文章結(jié)尾處也會(huì)進(jìn)行講解cookie編碼細(xì)節(jié)
            return unescape(document.cookie.substring(c_start,c_end));
        }
        return "";
    }
}

當(dāng)然想實(shí)現(xiàn)讀取cookie的方法還有不少，比如數(shù)組，正則等，這里就不往細(xì)說了。

設(shè)置cookie的有效期

文章中常常出現(xiàn)的cookie的生命周期也就是有效期和失效期，即cookie的存在時(shí)間。在默認(rèn)的情況下，cookie會(huì)在瀏覽器關(guān)閉的時(shí)候自動(dòng)清除，但是我們可以通過expires來設(shè)置cookie的有效期。語法如下，

document.cookie = "name=value;expires=date";

面代碼中的date值為GMT(格林威治時(shí)間)格式的日期型字符串，生成方式如下：

var date = new Date();
date.setDate(date.getDate() + 30);
date.toGMTString();

上面三行代碼分解為幾步來看，

• 通過new生成一個(gè)Date的實(shí)例，得到當(dāng)前的時(shí)間
• getDate()方法得到當(dāng)前本地月份中的某一天，接著加上30就是我希望這個(gè)cookie能過在本地保存30天
• 接著通過setDate()方法來設(shè)置時(shí)間
• 最后用toGMTString()方法把Date對(duì)象轉(zhuǎn)換為字符串，并返回結(jié)果

通過下面這個(gè)完整的函數(shù)來說明在創(chuàng)建 cookie 的過程中我們需要注意的地方 - 從w3school復(fù)制下來的。創(chuàng)建一個(gè)在cookie中存儲(chǔ)信息的函數(shù)，

function setCookie(c_name, value, expiredays) {
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + expiredays);
    document.cookie = c_name + "=" + escape(value) + ((expiredays === null) ? "" : ";expires=" + exdate.toGMTString());
}
// 調(diào)用
setCookie('username','Darren', 30)；

現(xiàn)在我們這個(gè)函數(shù)是按照天數(shù)來設(shè)置cookie的有效時(shí)間，如果想以其他單位（如：小時(shí)）來設(shè)置，那么改變第三行代碼即可：

exdate.setHours(exdate.getHours() + expiredays);

Cookie高級(jí)篇

cookie路徑概念

在基礎(chǔ)知識(shí)中有提到cookie有域和路徑的概念，現(xiàn)在來介紹路徑在cookie中的作用。

cookie一般都是由于用戶訪問頁面而被創(chuàng)建的，可是并不是只有在創(chuàng)建cookie的頁面才可以訪問這個(gè)cookie。

默認(rèn)情況下，只有與創(chuàng)建cookie的頁面在同一個(gè)目錄或子目錄下的網(wǎng)頁才可以訪問，這個(gè)是因?yàn)榘踩矫娴目紤]，造成不是所有頁面都可以隨意訪問其他頁面創(chuàng)建的cookie。舉個(gè)例子，

在”http://www.cnblogs.com/Darren_code/"這個(gè)頁面創(chuàng)建一個(gè)cookie，那么在"/Darren_code/"這個(gè)路徑下的頁面如："http://www.cnblogs.com/Darren_code/archive/2011/11/07/Cookie.html"這個(gè)頁面默認(rèn)就能取到cookie信息。

可在默認(rèn)情況下，”http://www.cnblogs.com"或者"http://www.cnblogs.com/xxxx/"就不可以訪問這個(gè)cookie（光看沒用，實(shí)踐出真理^_^）。

那么如何讓這個(gè)cookie能被其他目錄或者父級(jí)的目錄訪問類，通過設(shè)置cookie的路徑就可以實(shí)現(xiàn)。例子如下，

document.cookie = "name=value;path=path";
document.cookie = "name=value;expires=date;path=path";

path就是cookie的路徑。

最常用的例子就是讓cookie在跟目錄下，這樣不管是哪個(gè)子頁面創(chuàng)建的cookie，所有的頁面都可以訪問到了，

document.cookie = "name=Darren;path=/";

cookie域概念

路徑能解決在同一個(gè)域下訪問 cookie 的問題，咱們接著說 cookie 實(shí)現(xiàn)同域之間訪問的問題。語法如下，

document.cookie = "name=value;path=path;domain=domain";

domain就是設(shè)置的cookie域的值。

例如”www.qq.com”與”sports.qq.com”公用一個(gè)關(guān)聯(lián)的域名”qq.com”，我們?nèi)绻胱?“sports.qq.com”下的cookie被 “www.qq.com” 訪問，我們就需要用到cookie的domain屬性，并且需要把path屬性設(shè)置為 “/“。

document.cookie = "username=Darren;path=/;domain=qq.com"

注：一定的是同域之間的訪問，不能把domain的值設(shè)置成非主域的域名。

cookie安全性

通常cookie信息都是使用HTTP連接傳遞數(shù)據(jù)，這種傳遞方式很容易被查看，所以cookie存儲(chǔ)的信息容易被竊取。假如cookie中所傳遞的內(nèi)容比較重要，那么就要求使用加密的數(shù)據(jù)傳輸。所以cookie的這個(gè)屬性的名稱是secure，默認(rèn)的值為空。如果一個(gè)cookie的屬性為secure，那么它與服務(wù)器之間就通過HTTPS或者其它安全協(xié)議傳遞數(shù)據(jù)。語法如下：

document.cookie = "username=Darren;secure";

把cookie設(shè)置為secure，只保證cookie與服務(wù)器之間的數(shù)據(jù)傳輸過程加密，而保存在本地的cookie文件并不加密。如果想讓本地cookie也加密，得自己加密數(shù)據(jù)。注：就算設(shè)置了secure屬性也并不代表他人不能看到你機(jī)器本地保存的cookie信息，所以說到底，別把重要信息放cookie就對(duì)了。

cookie編碼細(xì)節(jié)

原本來想在常見問題那段介紹cookie編碼的知識(shí)，因?yàn)槿绻麑?duì)這個(gè)不了解的話編碼問題確實(shí)是一個(gè)坑，所以還是詳細(xì)說說。在輸入cookie信息時(shí)不能包含空格，分號(hào)，逗號(hào)等特殊符號(hào)，而在一般情況下，cookie信息的存儲(chǔ)都是采用未編碼的方式。所以，在設(shè)置cookie信息以前要先使用escape()函數(shù)將cookie值信息進(jìn)行編碼，在獲取到 cookie值得時(shí)候再使用unescape()函數(shù)把值進(jìn)行轉(zhuǎn)換回來。如設(shè)置cookie時(shí)：

document.cookie = name + "=" + escape (value);

再看看基礎(chǔ)用法時(shí)提到過的getCookie()內(nèi)的一句：

return unescape(document.cookie.substring(c_start,c_end));

這樣就不用擔(dān)心因?yàn)樵赾ookie值中出現(xiàn)了特殊符號(hào)而導(dǎo)致cookie信息出錯(cuò)了。