天天看點
傳回

關于js操作cookie

一、什麼是cookie

我們在浏覽器中，經常涉及到資料的交換，比如你登入郵箱，登入一個頁面。我們經常會在此時設定30天内記住我，或者自動登入選項。那麼它們是怎麼記錄資訊的呢，答案就是今天的主角cookie了，Cookie是由HTTP伺服器設定的，儲存在浏覽器中，但HTTP協定是一種無狀态協定，在資料交換完畢後，伺服器端和用戶端的連結就會關閉，每次交換資料都需要建立新的連結。

從JavaScript的角度看，cookie 就是一些字元串資訊。這些資訊存放在用戶端的計算機中，用于用戶端計算機與伺服器之間傳遞資訊。

在JavaScript中可以通過 document.cookie 來讀取或設定這些資訊。由于 cookie 多用在用戶端和服務端之間進行通信，是以除了JavaScript以外，服務端的語言（如PHP）也可以存取 cookie。

**

二、cookie的基礎知識

  1. cookie 是有大小限制的，每個 cookie 所存放的資料不能超過4kb，如果 cookie 字元串的長度超過4kb，則該屬性将傳回空字元串。
  2. 由于 cookie 最終都是以檔案形式存放在用戶端計算機中，是以檢視和修改 cookie 都是很友善的，這就是為什麼常說 cookie 不能存放重要資訊的原因。
  3. 每個 cookie 的格式都是這樣的：

    <cookie名>=<值>；

     名稱和值都必須是合法的标示符。
  4. cookie 是存在 有效期的。在預設情況下，一個 cookie 的生命周期就是在浏覽器關閉的時候結束。如果想要 cookie 能在浏覽器關掉之後還可以使用，就必須要為該 cookie 設定有效期，也就是 cookie 的失效日期。
  5. alert(typeof document.cookie)　　結果是 string
  6. cookie 有域和路徑這個概念。域就是domain的概念，因為浏覽器是個注意安全的環境，是以不同的域之間是不能互相通路 cookie 的(當然可以通過特殊設定的達到 cookie 跨域通路)。路徑就是routing的概念，一個網頁所建立的 cookie 隻能被與這個網頁在同一目錄或子目錄下得所有網頁通路，而不能被其他目錄下得網頁通路。
  7. 其實建立cookie的方式和定義變量的方式有些相似，都需要使用 cookie 名稱和 cookie 值。同個網站可以建立多個 cookie ，而多個 cookie 可以存放在同一個cookie 檔案中。

三、關于cookie中的屬性

1、Path – 路徑

指定與cookie關聯的WEB頁。

值可以是一個目錄，或者是一個路徑。

如果http://www.china.com/test/index.html 建立了一個cookie，那麼在http://www.china.com/test/目錄裡的所有頁面，以及該目錄下面任何子目錄裡的頁面都可以通路這個cookie。

這就是說，在http://www.china.com/test/test2/test3 裡的任何頁面都可以通路http://www.china.com/test/index.html建立的cookie。

但是，如果http://www.china.com/test/ 需要通路http://www.china.com/test/index.html設定的cooke，該怎麼辦？

這時，我們要把cookie的path屬性設定成“/”。在指定路徑的時候，凡是來自同一伺服器，URL裡有相同路徑的所有WEB頁面都可以共享cookie。

2、Domain – 域

指定關聯的WEB伺服器或域。

值是域名，比如www.china.com。這是對path路徑屬性的一個延伸。如果我們想讓 www.china.com能夠通路bbs.china.com設定的cookie，該怎麼辦? 我們可以把domain屬性設定成“china.com”，并把path屬性設定成“/”。

3、Secure – 安全

指定cookie的值通過網絡如何在使用者和WEB伺服器之間傳遞。

這個屬性的值或者是“secure”，或者為空。預設情況下，該屬性為空，也就是使用不安全的HTTP連接配接傳遞資料。如果一個 cookie 标記為secure，那麼，它與WEB伺服器之間就通過HTTPS或者其它安全協定傳遞資料。不過，設定了secure屬性不代表其他人不能看到你機器本地儲存的cookie。換句話說，把cookie設定為secure，隻保證cookie與WEB伺服器之間的資料傳輸過程加密，而儲存在本地的 cookie檔案并不加密。如果想讓本地cookie也加密，得自己加密資料。

4.Expires – 過期時間

指cookie的生命期，确切地說是過期日期。

如果想讓cookie的存在期限超過目前浏覽器的會話時間，就必須使用這個屬性。當過了到期日期時，浏覽器會自動删除cookie檔案。

四、cookie基礎用法

1.設定cookie

　在使用JavaScript存取 cookie 時，必須要使用Document對象的 cookie 屬性；一行代碼介紹如何建立和修改一個 cookie ：

如果要一次存儲多個名/值對，可以使用分号加空格（; ）隔開，例如：

以上代碼中’username’表示 cookie 名稱，’Darren’表示這個名稱對應的值。假設 cookie 名稱并不存在，那麼就是建立一個新的 cookie；如果存在就是修改了這個 cookie 名稱對應的值。如果要多次建立 cookie ，重複使用這個方法即可。

在cookie的名或值中不能使用分号（;）、逗号（,）、等号（=）以及空格（需要使用escape()函數進行編碼）。

2.擷取cookie

要精确的對 cookie 進行讀取其實很簡單，就是對字元串進行操作。從w3school上copy這段代碼來做分析：

function getCookie(c_name){
　　　　if (document.cookie.length>){　　//先查詢cookie是否為空，為空就return ""
　　　　　　c_start=document.cookie.indexOf(c_name + "=")　　//通過String對象的indexOf()來檢查這個cookie是否存在，不存在就為 -　　
　　　　　　if (c_start!=-){ 
　　　　　　　　c_start=c_start + c_name.length+　　//最後這個+其實就是表示"="号啦，這樣就擷取到了cookie值的開始位置
　　　　　　　　c_end=document.cookie.indexOf(";",c_start)　　//其實我剛看見indexOf()第二個參數的時候猛然有點暈，後來想起來表示指定的開始索引的位置...這句是為了得到值的結束位置。因為需要考慮是否是最後一項，是以通過";"号是否存在來判斷
　　　　　　　　if (c_end==-) c_end=document.cookie.length　　
　　　　　　　　return unescape(document.cookie.substring(c_start,c_end))　　//通過substring()得到了值。想了解unescape()得先知道escape()是做什麼的，都是很重要的基礎，想了解的可以搜尋下，在文章結尾處也會進行講解cookie編碼細節
　　　　　　} 
　　　　}
　　　　return ""
　　}

也可以使用分割字元串的方式進行判斷

//設定兩個cookie
document.cookie="userId=828";
document.cookie="userName=hulk";
//擷取cookie字元串
var strCookie=document.cookie;
//将多cookie切割為多個名/值對
var arrCookie=strCookie.split("; ");
var userId;
//周遊cookie數組，處理每個cookie對
for(var i=;i<arrCookie.length;i++){
             var arr=arrCookie[i].split("=");
             //找到名稱為userId的cookie，并傳回它的值
             if("userId"==arr[]){
                    userId=arr[];
                    break;
             }
}
alert(userId);

當然想實作讀取cookie的方法還有不少，比如數組，正則等，這裡就不往細說了。

（一般使用正則的方式相對比較簡單）

3.删除cookie

為了删除一個cookie，可以将其過期時間設定為一個過去的時間，例如：

//擷取目前時間
var date=new Date();
//将date設定為過去的時間
date.setTime(date.getTime()-);
//将userId這個cookie删除
document.cookie="userId=828; expire="+date.toGMTString();

4.設定cookie有效時間

文章中常常出現的 cookie 的生命周期也就是有效期和失效期，即 cookie 的存在時間。在預設的情況下，cookie 會在浏覽器關閉的時候自動清除，但是我們可以通過expires來設定 cookie 的有效期。文法如下：

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

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

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

  1. 通過new生成一個Date的執行個體，得到目前的時間；
  2. getDate()方法得到目前本地月份中的某一天，接着加上30就是我希望這個cookie能過在本地儲存30天；
  3. 接着通過setDate()方法來設定時間；
  4. 最後 用toGMTString()方法把Date對象轉換為字元串，并傳回結果

通過下面這個完整的函數來說明在建立 cookie 的過程中我們需要注意的地方 - 從w3school複制下來的。建立一個在 cookie 中存儲資訊的函數：

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());
　　}
　　使用方法：setCookie('username','Darren',)

　　現在我們這個函數是按照天數來設定cookie的有效時間，如果想以其他機關（如：小時）來設定，那麼改變第三行代碼即可：

這樣設定以後的cookie有效期就是按照小時為機關的。

**

五、進階部分

**

1..cookie 路徑概念

在基礎知識中有提到 cookie 有域和路徑的概念，現在來介紹路徑在 cookie 中的作用。

cookie 一般都是由于使用者通路頁面而被建立的，可是并不是隻有在建立 cookie 的頁面才可以通路這個 cookie。

預設情況下，隻有與建立 cookie 的頁面在同一個目錄或子目錄下的網頁才可以通路，這個是因為安全方面的考慮，造成不是所有頁面都可以随意通路其他頁面建立的 cookie。舉個例子：

　　在 “http://www.cnblogs.com/Darren_code/” 這個頁面建立一個cookie，那麼在”/Darren_code/”這個路徑下的頁面如： “http://www.cnblogs.com/Darren_code/archive/2011/11/07/Cookie.html“這個頁面預設就能取到cookie資訊。

　　可在預設情況下， “http://www.cnblogs.com“或者 “http://www.cnblogs.com/xxxx/” 就不可以通路這個 cookie（光看沒用，實踐出真理^_^）。

　　那麼如何讓這個 cookie 能被其他目錄或者父級的目錄通路類，通過設定 cookie 的路徑就可以實作。例子如下：

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

　“paths”就是 cookie 的路徑，最常用的例子就是讓 cookie 在跟目錄下,這樣不管是哪個子頁面建立的 cookie，所有的頁面都可以通路到了:

2.cookie 域概念

路徑能解決在同一個域下通路 cookie 的問題，咱們接着說 cookie 實作同域之間通路的問題。文法如下：

“domains”就是設定的 cookie 域的值。

　　例如 “www.qq.com” 與 “sports.qq.com” 公用一個關聯的域名”qq.com”，我們如果想讓 “sports.qq.com” 下的cookie被 “www.qq.com” 通路，我們就需要用到 cookie 的domain屬性，并且需要把path屬性設定為 “/”。例：

注：一定的是同域之間的通路，不能把domain的值設定成非主域的域名

3.cookie 安全性

通常 cookie 資訊都是使用HTTP連接配接傳遞資料，這種傳遞方式很容易被檢視，是以 cookie 存儲的資訊容易被竊取。假如 cookie 中所傳遞的内容比較重要，那麼就要求使用加密的資料傳輸。

　　是以 cookie 的這個屬性的名稱是“secure”，預設的值為空。如果一個 cookie 的屬性為secure，那麼它與伺服器之間就通過HTTPS或者其它安全協定傳遞資料。文法如下：

把cookie設定為secure，隻保證 cookie 與伺服器之間的資料傳輸過程加密，而儲存在本地的 cookie檔案并不加密。如果想讓本地cookie也加密，得自己加密資料。

　　注：就算設定了secure 屬性也并不代表他人不能看到你機器本地儲存的 cookie 資訊，是以說到底，别把重要資訊放cookie就對了，囧…

4.cookie 編碼細節

原本來想在常見問題那段介紹cookie編碼的知識，因為如果對這個不了解的話編碼問題确實是一個坑，是以還是詳細說說。

　　在輸入cookie資訊時不能包含空格，分号，逗号等特殊符号，而在一般情況下，cookie 資訊的存儲都是采用未編碼的方式。是以，在設定 cookie 資訊以前要先使用escape()函數将 cookie 值資訊進行編碼，在擷取到 cookie 值得時候再使用unescape()函數把值進行轉換回來。如設定cookie時：

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

再看看基礎用法時提到過的getCookie()内的一句：

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

這樣就不用擔心因為在cookie值中出現了特殊符号而導緻 cookie 資訊出錯了。

原生JavaScript
上一篇: 如何使用js操作Cookie
下一篇: cookie java js_js對cookie的讀寫操作

繼續閱讀