JavaScript中關於Cookie的詳細介紹

　　假如利用一個不變的框架來存儲購物欄數據,而商品顯示頁面是不斷變化的,儘管這樣能達到一個模擬全局變數的功能,但並不嚴謹.例如在導航框架頁面內右擊,單擊快捷菜單中的【刷新】命令,則所有的JavaScript變數都會丟失.因此,要實現嚴格的跨頁面全局變數,這種方式是不行的, JavaScript中的另一個機制：cookie,則可以達到真正全局變數的要求.

　　cookie 是瀏覽器提供的一種機制,它將document對象的cookie屬性提供給JavaScript.可以由JavaScript對其進行控制,而並不是 JavaScript本身的性質.cookie是存於用戶硬碟的一個文件,這個文件通常對應於一個域名,當瀏覽器再次訪問這個域名時,便使這個 cookie可用.因此,cookie可以跨越一個域名下的多個網頁,但不能跨越多個域名使用.

　　不同的瀏覽器對cookie的實現也不一樣,但其性質是相同的.例如在Windows 2000以及Windows xp中,cookie文件存儲於documents and settingsuserNamecookie文件夾下.通常的命名格式為：userName@domain.txt.

　　cookie機制將信息存儲於用戶硬碟,因此可以作為全局變數,這是它最大的一個優點.它可以用於以下幾種場合.

　　1.保存用戶登錄狀態.例如將用戶id存儲於一個cookie內,這樣當用戶下次訪問該頁面時就不需要重新登錄了,現在很多論壇和社區都提供這樣的功能.cookie還可以設置過期時間,當超過時間期限后,cookie就會自動消失.因此,系統往往可以提示用戶保持登錄狀態的時間：常見選項有一個月、三個月、一年等.

　　2.跟蹤用戶行為.例如一個天氣預報網站,能夠根據用戶選擇的地區顯示當地的天氣情況.如果每次都需要選擇所在地是煩瑣的,當利用了cookie后就會顯得很人性化了,系統能夠記住上一次訪問的地區,當下次再打開該頁面時,它就會自動顯示上次用戶所在地區的天氣情況.因為一切都是在後台完成,這樣的頁面就像為某個用戶所定製的一樣,使用起來非常方便.

　　3.定製頁面.如果網站提供了換膚或更換布局的功能,那麼可以使用cookie來記錄用戶的選項,例如：背景色、解析度等.當用戶下次訪問時,仍然可以保存上一次訪問的界面風格.

　　4.創建購物車.正如在前面的例子中使用cookie來記錄用戶需要購買的商品一樣,在結賬的時候可以統一提交.例如淘寶網就使用cookie記錄了用戶曾經瀏覽過的商品,方便隨時進行比較.

　　當然,上述應用僅僅是cookie能完成的部分應用,還有更多的功能需要全局變數.cookie的缺點主要集中於安全性和隱私保護.主要包括以下幾種：

　　1.cookie可能被禁用.當用戶非常注重個人隱私保護時,他很可能禁用瀏覽器的cookie功能；

　　2.cookie是與瀏覽器相關的.這意味著即使訪問的是同一個頁面,不同瀏覽器之間所保存的cookie也是不能互相訪問的；

　　3.cookie可能被刪除.因為每個cookie都是硬碟上的一個文件,因此很有可能被用戶刪除；

　　4.cookie安全性不夠高.所有的cookie都是以純文本的形式記錄於文件中,因此如果要保存用戶名密碼等信息時,最好事先經過加密處理.

　　設置cookie

　　每個cookie都是一個名/值對,可以把下面這樣一個字元串賦值給document.cookie：

　　document.cookie=」userId=828″;

　　如果要一次存儲多個名/值對,可以使用分號加空格（; ）隔開,例如：

　　document.cookie=」userId=828; userName=hulk」;

　　在cookie 的名或值中不能使用分號（;）、逗號（,）、等號（=）以及空格.在cookie的名中做到這點很容易,但要保存的值是不確定的.如何來存儲這些值呢？方法是用escape()函數進行編碼,它能將一些特殊符號使用十六進位表示,例如空格將會編碼為「20%」,從而可以存儲於cookie值中,使用此種方案還可以避免中文亂碼的出現.例如：

　　1.document.cookie=」str=」 escape(」I love ajax」);

　　相當於：

　　2.document.cookie=」str=I love ajax」;

　　當使用escape()編碼后,在取出值以後需要使用unescape()進行解碼才能得到原來的cookie值,這在前面已經介紹過.

　　儘管document.cookie看上去就像一個屬性,可以賦不同的值.但它和一般的屬性不一樣,改變它的賦值並不意味著丟失原來的值,例如連續執行下面兩條語句：

　　3.document.cookie=」userId=828″;

　　4.document.cookie=」userName=hulk」;

　　這時瀏覽器將維護兩個cookie,分別是userId和userName,因此給document.cookie賦值更像執行類似這樣的語句：

　　5.document.addCookie(」userId=828″);

　　6.document.addCookie(」userName=hulk」);

　　事實上,瀏覽器就是按照這樣的方式來設置cookie的,如果要改變一個cookie的值,只需重新賦值,例如：

　　7.document.cookie=」userId=929″;

　　這樣就將名為userId的cookie值設置為了929.

　　獲取cookie的值

　　下面介紹如何獲取cookie的值.cookie的值可以由document.cookie直接獲得：

　　8.var strCookie=document.cookie;

　　這將獲得以分號隔開的多個名/值對所組成的字元串,這些名/值對包括了該域名下的所有cookie.

　　在實際開發中,cookie常常需要長期保存,例如保存用戶登錄的狀態.這可以用下面的選項來實現：

　　document.cookie=」userId=828; expires=GMT_String」;

　　其中GMT_String是以GMT格式表示的時間字元串,這條語句就是將userId這個cookie設置為GMT_String表示的過期時間,超過這個時間,cookie將消失,不可訪問.

　　刪除cookie

　　為了刪除一個cookie,可以將其過期時間設定為一個過去的時間．

　　指定可訪問cookie的路徑

　　默認情況下,如果在某個頁面創建了一個cookie,那麼該頁面所在目錄中的其他頁面也可以訪問該cookie.如果這個目錄下還有子目錄,則在子目錄中也可以訪問.例如在　www.xxxx.com/html/a.html　中所創建的cookie,可以被　 www.xxxx.com/html/b.html　或　www.xxx.com/html/ some/c.html　所訪問,但不能被　www.xxxx.com/d.html　訪問.

　　為了控制cookie可以訪問的目錄,需要使用path參數設置cookie,語法如下：

　　document.cookie=」name=value; path=cookieDir」;

　　其中cookieDir表示可訪問cookie的目錄.例如：

　　document.cookie=」userId=320; path=/shop」;

　　就表示當前cookie僅能在shop目錄下使用.

　　如果要使cookie在整個網站下可用,可以將cookie_dir指定為根目錄,例如：

　　document.cookie=」userId=320; path=/」;

　　指定可訪問cookie的主機名

　　和路徑類似,主機名是指同一個域下的不同主機,例如：

　　www.google.com 和 gmail.google.com就是兩個不同的主機名.默認情況下,一個主機中創建的cookie在另一個主機下是不能被訪問的,但可以通過domain參數來實現對其的控制,其語法格式為：

　　document.cookie=」name=value; domain=cookieDomain」;

　　以google為例,要實現跨主機訪問,可以寫為：

　　document.cookie=」name=value;domain=.google.com」;

　　這樣,所有google.com下的主機都可以訪問該cookie.

　　綜合示例：構造通用的cookie處理函數

　　cookie的處理過程比較複雜,並具有一定的相似性.因此可以定義幾個函數來完成cookie的通用操作,從而實現代碼的復用.下面列出了常用的cookie操作及其函數實現.

　　1．設置COOKIE

　　9.function SetCookie(name,value,expires,path,domain,secure)

　　10.{

　　11.var expDays = expires*24*60*60*1000;

　　12.var expDate = new Date();

　　13.expDate.setTime(expDate.getTime() expDays);

　　14.var expString = ((expires==null) ? 「」 : (」;expires=」 expDate.toGMTString()))

　　15.var pathString = ((path==null) ? 「」 : (」;path=」 path))

　　16.var domainString = ((domain==null) ? 「」 : (」;domain=」 domain))

　　17.var secureString = ((secure==true) ? 「;secure」 : 「」 )

　　18.document.cookie = name 「=」 escape(value) expString pathString domainString secureString;

　　19.}

　　2．獲取指定名稱的cookie值：

　　20.function GetCookie(name)

　　21.{

　　22.var result = null;

　　23.var myCookie = document.cookie 「;」;

　　24.var searchName = name 「=」;

　　25.var startOfCookie = myCookie.indexOf(searchName);

　　26.var endOfCookie;

　　27.if (startOfCookie != -1)

　　28.{

　　29.startOfCookie = searchName.length;

　　30.endOfCookie = myCookie.indexOf(」;」,startOfCookie);

　　31.result = unescape(myCookie.substring(startOfCookie, endOfCookie));

　　32.}

　　33.return result;

　　34.}

　　3．刪除指定名稱的cookie：

　　35.function ClearCookie(name)

　　36.{

　　37.var ThreeDays=3*24*60*60*1000;

　　38.var expDate = new Date();

　　39.expDate.setTime(expDate.getTime()-ThreeDays);

　　40.document.cookie=name 」=;expires=」 expDate.toGMTString();

　　41.}

Tags: