昨天接到一個小需求，就是在ipad上訪問某頁面，頁面頂部出現一個下載客戶端的提示，點擊關閉按鈕后，提示信息消失，信息存入cookie，在cookie未過期之前，除非用戶自己清除瀏覽器的cookie，否則此提示信息不再顯示。像類似這樣的需求非常常見，而網站上使用cookie技術也比比皆是。今天就抽空整理下關於瀏覽器cookie的那些事兒。有些信息一筆帶過，未做詳細描述。如描述當中有錯誤，歡迎大家指出。
1. Cookie介紹
cookie的傳遞流程是用戶在訪問站點時，服務器端生成cookie，發送給瀏覽器端儲存，當下次再訪問時瀏覽器會將該網站的cookie發回給服務器端，服務器端根據cookie信息顯示特定的內容。簡而言之就是瀏覽器端會儲存你在這個站點的一些信息，比如登錄狀態，用戶ID，密碼、瀏覽過的網頁、停留的時間等信息，記錄在cookie里，方便下次訪問時發送給服務器端。因為HTTP協議是無狀態的，即服務器不知道用戶上一次做了什么，這嚴重阻礙了交互式web應用程序的實現。服務器可以設置或讀取cookie中的信息，借此維護用戶跟服務器會話中的狀態。
cookie的使用也很普遍，比如說在電商網站中，用戶挑選了商品后，商品信息會記錄在cookie里，然后在購物車頁面讀取cookie里的商品內容。再比如當用戶登錄一個網站時，如果用戶勾選了下次自動登錄，則發送登錄請求時，服務器會發送包含登錄憑據（用戶名和密碼被加密過）的cookie到用戶的硬盤上，則下次登錄時，瀏覽器會發送該cookie到服務器端驗證，這次用戶不必輸入用戶名和密碼就可以直接登錄了。另外網站還可以利用cookie跟蹤統計用戶訪問該網站的習慣，比如什么時間訪問，訪問了哪些頁面，訪問了頁面的哪塊信息，在每個網頁的停留時間等。利用這些信息，一方面是可以為用戶提供個性化的服務，另一方面，也可以作為了解所有用戶行為的工具，對於網站經營策略的改進有一定參考價值。
cookie是保存在客戶端中，分為內存cookie和硬盤cookie。內存cookie由瀏覽器維護，保存在內存中，瀏覽器關閉就失效。硬盤cookie的存在時間長，有個過期時間，除非手工清理或是到了過期時間，否則不會刪除，將過期時間設置為0或負值，這樣在關閉瀏覽器時，cookie同樣失效。
cookie的大小限制在4kb左右，所以存放的內容不是很多。cookie在網絡中的應用也有一些弊端，比如會影響到用戶的隱私，安全，以及根據用戶的瀏覽記錄投放垃圾廣告，給用戶造成困擾等。
2. Cookie腳本設置
既然cookie在網站中也有不少用處，那如何設置cookie呢？下面簡單介紹下利用JS如何設置cookie。
大致思路為：先讀取document.cookie字符串，保存在自定義的cookie對象里，讀取通過操作自定義的cookie對象來完成，刪除，添加通過重寫document.cookie字符串來操作。
1 <script> 2 var __cookies = {}, // cookie數據緩存 3 __date = new Date(), // cookie涉及的時間處理對象 4 __currentms = __date.getTime(), // 當前時間值 5 __milliseconds = 24*60*60*1000; // 一天的毫秒數值 6 7 /* 取得cookie字符串 8 * @param {String} _key KEY值 9 * @param {String} _value 指定的值 10 * @param {String} _domain 域 11 * @param {Number} _expires 過期時間偏移，單位天 12 * @param {String} _path 路徑 13 */ 14 var __getCookieStr = function(_key,_value){ 15 if(arguments[3]) __date.setTime(__currentms + arguments[3]*__milliseconds); 16 var _path = arguments[4]?('path='+arguments[4]+';'):'', 17 _expires = arguments[3]?('expires='+__date.toGMTString()+';'):'', 18 _domain = arguments[2]?('domain='+arguments[2]+';'):''; 19 return _key+'='+_value+';'+_domain+_expires+_path; 20 }; 21 22 /* 23 * 添加cookie信息，如果KEY已存在則覆蓋原先內容 24 * @param {String} _key KEY值 25 * @param {String} _value 指定的值 26 * @param {String} _domain 域 27 * @param {Number} _expires 過期時間偏移，單位天 28 * @param {String} _path 路徑 29 * @return {Void} 30 */ 31 _$setCookie = function(_key,_value){ 32 document.cookie = __getCookieStr.apply(null,arguments); 33 __cookies[_key] = _value; 34 }; 35 36 /* 獲取cookie，根據key值獲取 */ 37 _$getCookie = function(_key){ 38 return __cookies[_key]||''; 39 }; 40 41 /* 42 * 刪除cookie 43 * @param {String} _key 要刪除cookie的KEY值 44 * @param {String} _domain 域 45 * @param {String} _path 路徑 46 * @return {Void} 47 */ 48 _$delCookie = function(_key){ 49 document.cookie = __getCookieStr(_key,'',arguments[1],-100,arguments[2]); 50 delete __cookies[_key]; 51 }; 52 53 /* 刷新cookie */ 54 _$refreshCookie = function(){ 55 var _arr = document.cookie.split(/\s*\;\s*/); 56 for(var i=0,l=_arr.length;i<l;i++){ 57 __cookies[_arr[i].substring(0,_arr[i].indexOf('='))] = _arr[i].substring(_arr[i].indexOf('=')+1); 58 } 59 }; 60 61 // init 62 _$refreshCookie(); 63 </script>