1. 背景介紹
什么是COOKIE
Cookie，有時也用其復數形式 Cookies，指某些網站為了辨別用戶身份、進行 session 跟蹤而儲存在用戶本地終端 上的數據（通常經過加密）。定義于 RFC2109 和 2965 中的都已廢棄，最新取代的規范是 RFC6265 。 ---- 百度百科
在現代瀏覽器中其它類型的cookie有重要的作用。可能最重要的就是權限認證cookie，通過這種最常用的方法web服務器可以知道用戶登錄登出，以及正在登錄的賬號。
2. 知識剖析
cookie有哪幾種？
一般來說cookie分為以下7種：
-
Session Cookie
這個類型的cookie只在會話期間內有效，即當關閉瀏覽器的時候，它會被瀏覽器刪除。設置session cookie的辦法是：在創建cookie不設置Expires即可。 -
Persistent Cookie
持久型cookie顧名思義就是會長期在用戶會話中生效。當你設置cookie的屬性Max-Age為1個月的話，那么在這個月里每個相關URL的http請求中都會帶有這個cookie。所以它可以記錄很多用戶初始化或自定義化的信息，比如什么時候第一次登錄及弱登錄態等。 -
Secure cookie
安全cookie是在https訪問下的cookie形態，以確保cookie在從客戶端傳遞到Server的過程中始終加密的。這樣做大大的降低的cookie內容直接暴露在黑客面前及被盜取的概率。 -
HttpOnly Cookie
HttpOnly屬性指示瀏覽器除了HTTP/HTTPS請求之外不要顯示cookie。這意味著這種cookie不能在客戶端通過腳本獲取，因此也不會輕易的被跨站腳本竊取。目前主流的瀏覽器已經都支持了httponly cookie。1. IE5+ 2. Firefox 1.0+ 3. Opera 8.0+。 -
3rd-party cookie
第一方cookie是cookie種植在瀏覽器地址欄的域名或子域名下的。第三方cookie則是種植在不同于瀏覽器地址欄的域名下。例如：用戶訪問a.com時，在ad.google.com設置了個cookie，在訪問b.com的時候，也在ad.google.com設置了一個cookie。這種場景經常出現在google adsense之類的廣告服務商。廣告商就可以采集用戶的一些習慣和訪問歷史。 -
Super Cookie
超級cookie是設置公共域名前綴上的cookie。通常a.b.com的cookie可以設置在a.b.com和b.com，而不允許設置在.com上，但是很不幸的是歷史上一些老版本的瀏覽器因為對新增后綴過濾不足導致過超級cookie的產生。 -
Zombie Cookie
僵尸cookie是指那些刪不掉的，刪掉會自動重建的cookie。僵尸cookie是依賴于其他的本地存儲方法，例如flash的share object,html5的local storages等，當用戶刪除cookie后，自動從其他本地存儲里讀取出cookie的備份，并重新種植。
3. 常見問題
COOKIE的用處
- 保存用戶的登陸狀態，用戶進行登陸，成功登陸后，服務器生成特定的
cookie返回給客戶端，客戶端下次訪問該域名下的任何頁面，將該cookie的信息發送給服務器，服務器經過檢驗，來判斷用戶是否登陸。 - 記錄用戶的行為，例如，我們在某寶上搜索商品之后，下次再進入某寶的時候就會發現一堆推薦的商品。
- 電商購物車的處理，因為在不同頁面，點擊添加到購物車，這個信息也是記到了
cookie里面。結賬的時候統一提交。現在不易都記錄在服務器的session，不會存儲在本地cookie。 - 定制頁面。如果網站提供了換膚的功能，我們這個時候也是將他記錄到
cookie里面，以便下次訪問還是保持原來的風格頁面。
COOKIE和SESSION的的區別
- 具體來說
cookie機制采用的是在客戶端保持狀態的方案，而session機制采用的是在服務器端保持狀態的方案。同時我們也看到，由于才服務器端保持狀態的方案在客戶端也需要保存一個標識，所以session機制可能需要借助于cookie機制來達到保存標識的目的，但實際上還有其他選擇。 - HTML5標準（絕大多數現代瀏覽器在某種程度上都支持）包含了一個
Javascript API叫做Web storage:local storage和session storage。local storage的行為和持久化cookie類似，而session storage的行為和session cookie的行為類似，也就是session storage是綁定在一個單獨的tab或者窗口的生命周期中的（也就是頁面session），而session cookie是針對整個瀏覽器的。
如何利用實現自動登錄
- 當用戶在某個網站注冊后，就會收到一個惟一用戶ID的
cookie。客戶后來重新連接時，這個用戶ID會自動返回，服務器對它進行檢查，確定它是否為注冊用戶且選擇了自動登錄，從而使用戶務需給出明確的用戶名和密碼，就可以訪問服務器上的資源。
5. 編碼實戰
js中cookie的操作
（這里偷懶引用一下任昊師兄的代碼）
unction saveCookie(){
var userName = document.getElementById("username").value;
var password = document.getElementById("password").value;
console.log(userName+password);
var date = new Date();
// date.setDate(date.getDate()+1);
date.setTime(date.getTime()+5000);
//將cookie保存5秒鐘
setCookie("userName",userName,date.toGMTString(),"","","");
setCookie("password",password,date.toGMTString(),"","","");
showCookie()
}
//設置Cookie
/*
在cookie的名或值中不能使用分號（;）、逗號（,）、等號（=）以及空格。在cookie
的名中做到這點很容易，但要保存的值是不確定的。如何來存儲這些值呢？方法是用
encodeURI()函數進行編碼，它能將一些特殊符號使用十六進制表示，例如空格將會編碼
為“20%”，從而可以存儲于cookie值中，而且使用此種方案還可以避免中文亂碼的出現。
在獲取cookie時可以通過decodeURI()方法對cookie進行解碼。
Cookie的保存格式為："name=value; expires=evalue; path=pvalue;"
每個屬性之間通過：'分號+空格'(; )隔開;
參數值的意思:
name:表示要存入對象的名稱，唯一必須設置（通常使用：user@domain格式命名，
user為本地用戶，domain為所訪問網站的域名）。value：表示要存入的值。
expires：該對象的有效時間（可選）（默認為當前瀏覽器會話有用，關閉瀏覽器就消失）;
path:指定該Cookie作用范圍（可選）(即：在那些網頁上可用)；
domain:設置web服務器的Cookie共享域（可選）(如：test*.com)表示域名為test*.com
的服務器共享該Cookie
secure：設置Cookie的傳輸過程是否加密（可選）（一般為SSH加密）
*/
好，注釋很詳細，我們下面來進行cookie 的讀寫：
function setCookie(name,value,expires,path,domain,secure){
document.cookie=name+"="+encodeURI(value)+
((expires) ? "; expires=" + expires : "")+
((path) ? "; path=" + path : "")+
((domain) ? "; domain=" + domain : "")+
((secure) ? "; secure=" + secure : "");
}//從這里可以上到上面的參數是如何被處理的
/**
獲取瀏覽器中的Cookie時，只能夠一次獲取所有的cookie值，而不能指定cookie名稱來獲得
指定的值，這正是處理cookie值最麻 煩的一部分。
用戶必須自己分析這個字符串，來獲取指定的cookie值
**/
//獲取瀏覽器中的Cookie
function getCookie(cName){
var cookieString = decodeURI(document.cookie);
var cookieArray = cookieString.split("; ");
console.log(cookieArray.length);
for(var i = 0; i < cookieArray.length; i++){
var cookieNum = cookieArray[i].split("=");
console.log(cookieNum.toString());
var cookieName = cookieNum[0];
var cookieValue = cookieNum[1];
if(cookieName == cName){
return cookieValue;
}
}
return false;
}
function showCookie(){
var txt = document.getElementById("txt_showCookie");
txt.value = "用戶名："+getCookie("userName")+"\n密碼："+getCookie("password");
}
//刪除Cookie就是簡單的將cookie的expires屬性設置為一個過去的時間即可。
function deleteCookie(){
var date = new Date();
date.setTime(date.getTime()-1000);
setCookie("userName",password,date.toGMTString(),"","","");
setCookie("password",password,date.toGMTString(),"","","");
showCookie();
}
6. 擴展思考
COOKIES的缺點有哪些
除了隱私問題，cookie還有其他的技術缺陷。特別是它不能總是精確的標識用戶，它可以被用來進行安全攻擊，而且還與REST軟件設計風格相悖。
- 錯誤識別
如果一臺電腦上使用多了瀏覽器，那么每個瀏覽器都會給cookie一個單獨的存儲空間。因此cookie不是標識一個人，而是作為一個用戶賬號，一臺電腦，一個瀏覽器之間的連接。因此任何使用多個賬號多臺電腦以及多個瀏覽器的用戶都會有多個cookie。同樣的，cookie不能區分共享一個賬號一臺電腦一個瀏覽器的多個用戶。 - 客戶端和服務端不一致的狀態
使用cookie可能在客戶端狀態和存儲在cookie中的狀態之間產生不一致性。如果用戶取得了一個cookie，然后點擊了瀏覽器的返回按鈕，然后瀏覽器的狀態通常不會和之前獲取的狀態一樣了。例如，如果一個網上商城的購物車用cookie來實現的，在用戶回退瀏覽器歷史時，購物車里面的內容可能不會改變，如果用戶按了一個按鈕往購物車里面添加了一個物品，然后點擊了瀏覽器的返回按鈕，這個新增的物品還會保留在購物車中。這可能不是用戶的意圖，用戶可能只想撤銷之前選擇新物品的操作。這可能導致不可靠、混亂和錯誤。所以web開發者應該注意這個問題，想到方法處理類似的問題。
（詳細和如何處理可以查看參考三，講的相當好。）
7. 參考文獻
a. cookie和session的區別和各自的應用場景
b. 全面解讀HTTP Cookie
c. 前端必備HTTP技能之cookie技術詳解
