JavaScript操作Cookie詳解

 這篇文章主要介紹了JavaScript操作Cookie詳解,本文講解了什麼是Cookie、Cookie基礎知識、Cookie常見問題、cookie 有兩種清除方式、Cookie基礎用法、Cookie高級用法等內容,需要的朋友可以參考下

   

什麼是 Cookie

“cookie 是存儲於訪問者的計算機中的變量。每當同一台計算機通過浏覽器請求某個頁面時，就會發送這個 cookie。你可以使用 JavaScript 來創建和取回 cookie 的值。” - w3school

cookie 是訪問過的網站創建的文件，用於存儲浏覽信息，例如個人資料信息。

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

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

Cookie 基礎知識

cookie 是有大小限制的，每個 cookie 所存放的數據不能超過4kb，如果 cookie 字符串的長度超過4kb，則該屬性將返回空字符串。

由於 cookie 最終都是以文件形式存放在客戶端計算機中，所以查看和修改 cookie 都是很方便的，這就是為什麼常說 cookie 不能存放重要信息的原因。

每個 cookie 的格式都是這樣的：<cookie名>=<值>；名稱和值都必須是合法的標示符。

cookie 是存在 有效期的。在默認情況下，一個 cookie 的生命周期就是在浏覽器關閉的時候結束。如果想要 cookie 能在浏覽器關掉之後還可以使用，就必須要為該 cookie 設置有效期，也就是 cookie 的失效日期。

alert(typeof document.cookie)　　結果是 string，曾經我以為是array，還鬧過笑話…囧

cookie 有域和路徑這個概念。域就是domain的概念，因為浏覽器是個注意安全的環境，所以不同的域 之間是不能互相訪問 cookie 的(當然可以通過特殊設置的達到 cookie 跨域訪問)。路徑就是routing的概念，一個網頁所創建的 cookie 只能被與這個網頁在同一目錄或子目錄下得所有網頁訪問，而不能被其他目錄下得網頁訪問（這句話有點繞，一會看個例子就好理解了）。

其實創建cookie的方式和定義變量的方式有些相似，都需要使用 cookie 名稱和 cookie 值。同個網站可以創建多個 cookie ，而多個 cookie 可以存放在同一個cookie 文件中。

Cookie常見問題

cookie 存在兩種類型：

你浏覽的當前網站本身設置的 cookie

來自在網頁上嵌入廣告或圖片等其他域來源的 第三方 cookie (網站可通過使用這些 cookie 跟蹤你的使用信息)

剛剛基礎知識裡面有說到 cookie 生命周期的問題，其實 cookie 大致可分為兩種狀態：

臨時性質的cookie。當前使用的過程中網站會儲存一些你的個人信息，當浏覽器關閉後這些信息也會從計算機中刪除

設置失效時間的cookie。就算浏覽器關閉了，這些信息業依然會在計算機中。如 登錄名稱和密碼，這樣無須在每次到特定站點時都進行登錄。這種cookie 可在計算機中保留幾天、幾個月甚至幾年

cookie 有兩種清除方式：

通過浏覽器工具清除 cookie (有第三方的工具，浏覽器自身也有這種功能)

通過設置 cookie 的有效期來清除 cookie

注：刪除 cookie 有時可能導致某些網頁無法正常運行

浏覽器可以通過設置來接受和拒絕訪問 cookie。

出於功能和性能的原因考慮，建議盡量降低 cookie 的使用數量，並且要盡量使用小 cookie。

關於cookie編碼的細節問題將會在cookie高級篇中單獨介紹。

假如是本地磁盤中的頁面，chrome的控制台是無法用JavaScript讀寫操作 cookie 的，解決辦法…換一個浏覽器^_^。

Cookie基礎用法

一.簡單的存取操作

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

代碼如下:
document.cookie = 'username=Darren';
以上代碼中'username'表示 cookie 名稱，'Darren'表示這個名稱對應的值。假設 cookie 名稱並不存在，那麼就是創建一個新的 cookie；如果存在就是修改了這個 cookie 名稱對應的值。如果要多次創建 cookie ，重復使用這個方法即可。

 

二.cookie的讀取操作

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

 

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

 

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

三.設置cookie的有效期

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

 

代碼如下:
document.cookie = "name=value;expires=date";
上面代碼中的date值為GMT(格林威治時間)格式的日期型字符串，生成方式如下：
代碼如下:
var _date = new Date();
_date.setDate(_date.getDate()+30);
_date.toGMTString();

 

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

通過new生成一個Date的實例，得到當前的時間；

getDate()方法得到當前本地月份中的某一天，接著加上30就是我希望這個cookie能過在本地保存30天；

接著通過setDate()方法來設置時間；

最後 用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',30)

 

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

代碼如下:
exdate.setHours(exdate.getHours() + expiredays);

 

這樣設置以後的cookie有效期就是按照小時為單位的。

常見問題中有提到清除 cookie 的兩種方法，現在要說的是使 cookie 失效，通過把有效期的時間設置為一個已過期的時間。既然已經有了設置有效期的方法，那麼設置失效期的方法就請感興趣的朋友自己動手了^_^。下面繼續比較深的cookie話題。

Cookie 高級篇

一.cookie 路徑概念

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

cookie 一般都是由於用戶訪問頁面而被創建的，可是並不是只有在創建 cookie 的頁面才可以訪問這個 cookie。

默認情況下，只有與創建 cookie 的頁面在同一個目錄或子目錄下的網頁才可以訪問，這個是因為安全方面的考慮，造成不是所有頁面都可以隨意訪問其他頁面創建的 cookie。舉個例子：

在 “http://www.jb51.net/Darren_code/” 這個頁面創建一個cookie，那麼在”/Darren_code/”這個路徑下的頁面如： “http://www.jb51.net/Darren_code/archive/2011/11/07/Cookie.html”這個頁面默 認就能取到cookie信息。

可在默認情況下， “http://www.jb51.net”或者 “http://www.jb51.net/xxxx/” 就不可以訪問這個 cookie（光看沒用，實踐出真理^_^）。

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

代碼如下:
document.cookie = "name=value;path=path"
document.cookie = "name=value;expires=date;path=path"
紅色字體path就是 cookie 的路徑，最常用的例子就是讓 cookie 在跟目錄下,這樣不管是哪個子頁面創建的 cookie，所有的頁面都可以訪問到了:

 

 

代碼如下:
document.cookie =