歡迎您光臨本站 註冊首頁

JavaScript中關於Cookie的詳細介紹

←手機掃碼閱讀     火星人 @ 2014-03-09 , reply:0

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

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

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

  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.}


[火星人 ] JavaScript中關於Cookie的詳細介紹已經有721次圍觀

http://coctec.com/docs/java/show-post-60397.html