關於Cookie的簡單總結

Cookie簡介

HTTP Cookie（也叫Web Cookie或瀏覽器Cookie）是服務器發送到用戶瀏覽器並保存在本地的一小塊數據，它會在瀏覽器下次向同一服務器再發起請求時被攜帶併發送到服務器上。一般，它用於告知服務端兩個請求是否來自同一瀏覽器，如保持用戶的登陸狀態。Cookie使基於無狀態的HTTP協議記錄穩定的狀態信息成爲了可能。

Cookie主要用於如下三個方面:

• 回話狀態管理(例如用戶登陸狀態 , 購物車等)
• 個性化設置(如用戶自定義設置,主題等)
• 瀏覽器行爲跟蹤 (如跟蹤分析用戶行爲等)

建立Cookie

當服務器收到HTTP請求時，服務器能夠在響應頭裏面添加一個Set-Cookie選項。瀏覽器收到響應後一般會保存下Cookie，以後對該服務器每一次請求中都經過Cookie請求頭部將Cookie信息發送給服務器。另外，Cookie的過時時間、域、路徑、有效期、適用站點均可以根據須要來指定。

Set-Cookie: <cookie名>=<cookie值>

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry
[頁面內容]

如今，對該服務器發起的每一次新請求，瀏覽器都會將以前保存的Cookie信息經過Cookie請求頭部再發送給服務器。

GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry

客戶端獲取Cookie

客戶端能夠經過以下代碼獲取Cookie值.

document.cookie

代碼實現獲取各個cookie值

var Cookie = {};
var cookie = document.cookie;
var tempArr = cookie.split(';');
var len = tempArr.length;

for(var i = 0; i < len; i++){
    var tempCookie = tempArr[i];
    var p = tempCookie.indexOf('=');
    var key = tempCookie.substring(0,p);
    var value = tempCookie.substring(p+1);
    value = decodeURIComponent(value);
    Cookie[key] = value;
}

獲取結果:

另外除了在控制檯去打印,在chrome的調試器中也能夠看到cookie信息.

Cookie 必須在 HTML 文件的內容輸出以前設置；不一樣的瀏覽器 (Netscape Navigator、Internet Explorer) 對 Cookie 的處理不一致，使用時必定要考慮；客戶端用戶若是設置禁止 Cookie，則 Cookie 不能創建。 而且在客戶端，一個瀏覽器能建立的 Cookie 數量最多爲 300 個，而且每一個不能超過 4KB，每一個 Web 站點能設置的 Cookie 總數不能超過 20 個

設置Cookie

var setCookie = function(key,value,expires){
    var iDay = new Date();
    var maxTime = iDay.setDate(iDay.getDate() + expires);
    document.cookie = key + "=" + value + "; " + "expires=" + maxTime;
};

刪除Cookie值

var deleteCookie = function(key){   
    setCookie(key,"",-1);
}