# javascript快速入門20--Cookie ## Cookie 基礎知識 我們已經知道，在 document 對象中有一個 cookie 屬性。但是 Cookie 又是什么？“某些 Web 站點在您的硬盤上用很小的文本文件存儲了一些信息，這些文件就稱為 Cookie。”—— MSIE 幫助。一般來說，Cookies 是 CGI 或類似，比 HTML 高級的文件、程序等創建的，但是 JavaScript 也提供了對 Cookies 的很全面的訪問權利。 在繼續之前，我們先要學一學 Cookie 的基本知識。 每個 Cookie 都是這樣的：cookie名=cookie值；cookie本身僅僅是一個字符串，是一組名值對；多組名值對用分號加空格分隔！ "cookie名"的限制與 JavaScript 的命名限制大同小異，少了“不能用 JavaScript 關鍵字”，多了“只能用可以用在 URL 編碼中的字符”。后者比較難懂，但是只要你只用字母和數字命名，就完全沒有問題了。“值”的要求也是“只能用可以用在 URL 編碼中的字符”。 每個 Cookie 都有失效日期，一旦電腦的時鐘過了失效日期，這個 Cookie 就會被刪掉。我們不能直接刪掉一個 Cookie，但是可以用設定失效日期早于現在時刻的方法來間接刪掉它。 每個網頁，或者說每個站點，都有它自己的 Cookies，這些 Cookies 只能由這個站點下的網頁來訪問，來自其他站點或同一站點下未經授權的區域的網頁，是不能訪問的。每一“組”Cookies 有規定的總大小（大約 2KB 每“組”），一超過最大總大小，則最早失效的 Cookie 先被刪除，來讓新的 Cookie“安家”。 ## 訪問Cookie ``` document.write(document.cookie);//輸出類似"name1=value1; name2=value2; name3=value3"的字符串 document.write(typeof document.cookie);//cookie僅僅是個字符串 ``` 但這樣獲取到的是一堆混亂的字符串，必須對其進行處理才能知道它的含義！在類似ASP或PHP這樣的服務器端腳本中，往往設置cookie十分簡單 ``` //ASP response.cookies("cookieName")="cookieValue" //PHP setcookie("cookieName","cookieValue"); ``` ### 解析Cookie名值對 方案一：直接截取字符串 ``` function getCookie(cookieName) { var start = document.cookie.indexOf(cookieName+"="); if (start ==-1) {return "";} start = start+cookieName.length+1; var end = document.cookie.indexOf(";",start); if (end=-1) {end = document.cookie.length;} return document.cookie.substring(start,end); } ``` 方案二：將Cookie拆分為數組，通過遍歷取得 ``` function getCookie(cookieName) { var cookies=document.cookie.split("; ");//一個分號加一個空格 if (!cookies.length) {return "";} var pair=["",""]; for (var i=0;i< cookies.length;i++) { pair = cookies[i].split("=");//以賦值號分隔,第一位是Cookie名,第二位是Cookie值 if (pair[0]==cookieName) { break; } } return pair[1]; } ``` 方案三：使用正則表達式解析 ``` function getCookie(cookieName) { var re = new RegExp("\\b"+cookieName+"=([^;]*)\\b"); var arr = re.exec(document.cookie); return arr?arr[1]:""; } ``` ### 設置Cookie 一個Cookie包含以下信息： * Cookie名稱，Cookie名稱必須使用只能用在URL中的字符，一般用字母及數字 * Cookie值，Cookie值同樣也只能使用可以用在URL中的字符，一般需要在設置Cookie值時對其使用encodeURI方法進行轉義 * Expires，過期日期，一個GMT格式的時間，當過了這個日期之后，瀏覽器就會將這個Cookie刪除掉，當不設置這個的時候，Cookie在瀏覽器關閉后消失 * Path，一個路徑，在這個路徑下面的頁面才可以訪問該Cookie，一般設為“/”，以表示同一個站點的所有頁面都可以訪問這個Cookie * Domain，子域，指定在該子域下才可以訪問Cookie，例如要讓Cookie在bbs.x-life.com下可以訪問，但在news.x-life.com下不能訪問，則可將domain設置成bbs.x-life.com * Secure，安全性，指定Cookie是否只能通過https協議訪問，一般的Cookie使用HTTP協議既可訪問，如果設置了Secure（沒有值），則只有當使用https協議連接時cookie才可以被頁面訪問 **注意：Cookie安全機制要求站點頁面只能訪問本站點的Cookie，不能訪問其它站點的Cookie。同時，最好在設置Cookie時使用encodeURI對象進行URI編碼，在取出Cookie時再使用decodeURI對其進行解碼！** 設置一個完整Cookie示例 ``` var expires = new Date(); expires.setMonth(expires.getMonth()+1);//一個月后Cookie失效 document.cookie = "userName="+encodeURI("用戶名")+"; expires="+ expires.toGMTString()+"; path=/; domain=x-life.com; secure"; ``` 每次設置document.cookie值時如果該Cookie名稱并不存在，則新增一個Cookie，如果已經存在，則修改以前的值！ ``` document.cookie ="a=1";//新增一個名稱為a的Cookie document.cookie = "b=2";//新增一個名稱為b的Cookie，原來的Cookie安然無恙 document.cookie = "a=3";//將原來的名稱為a的Cookie值修改為3 ``` setCookie函數 ``` function setCookie(name,value,expires,domain,secure) { var str = name+"="+encodeURI(value);//不要忘了在對應getCookie函數里面加上decodeURI方法 if (expires) { str += "; expires="+expires.toGMTString(); } if (path) { str += "; path="+path; } if (domain) { str += "; domain="+domain; } if (secure) { str += "; secure"; } document.cookie = str; } ``` ## 刪除Cookie 沒有刪除Cookie的直接的方法，但可以變通一下來刪除Cookie！ ``` function delCookie(cookieName) { var expires = new Date(); expires.setTime(expires.getTime()-1);//將expires設為一個過去的日期，瀏覽器會自動刪除它 document.cookie = cookieName+"=; expires="+expires.toGMTString(); } ```