1. 程式人生 > >用JS操作COOKIE

用JS操作COOKIE

從事web開發也有些日子了,cookie 是個啥差不多能說明白,可是實際自己一上手操作就是得去搜索(你們懂的),結果被鄙視了...所以就寫一篇博文做為自己的學習筆記,嘿嘿,部落格的好處在此體現出來了。

  什麼是 Cookie

  “cookie 是儲存於訪問者的計算機中的變數。每當同一臺計算機通過瀏覽器請求某個頁面時,就會發送這個 cookie。你可以使用 JavaScript 來建立和取回 cookie 的值。” - w3school
  cookie 是訪問過的網站建立的檔案,用於儲存瀏覽資訊,例如個人資料資訊。

  從JavaScript的角度看,cookie 就是一些字串資訊。這些資訊存放在客戶端的計算機中,用於客戶端計算機與伺服器之間傳遞資訊。

  在JavaScript中可以通過 document.cookie 來讀取或設定這些資訊。由於 cookie 多用在客戶端和服務端之間進行通訊,所以除了JavaScript以外,服務端的語言(如PHP)也可以存取 cookie。

  Cookie 基礎知識

  • cookie 是有大小限制的,每個 cookie 所存放的資料不能超過4kb,如果 cookie 字串的長度超過4kb,則該屬性將返回空字串。
  • 由於 cookie 最終都是以檔案形式存放在客戶端計算機中,所以檢視和修改 cookie 都是很方便的,這就是為什麼常說 cookie 不能存放重要資訊的原因。
  • 每個 cookie 的格式都是這樣的:<cookie名>=<值>;名稱和值都必須是合法的標示符。
  • cookie 是存在 有效期的。在預設情況下,一個 cookie 的生命週期就是在瀏覽器關閉的時候結束。如果想要 cookie 能在瀏覽器關掉之後還可以使用,就必須要為該 cookie 設定有效期,也就是 cookie 的失效日期。
  • alert(typeof document.cookie)  結果是 string,曾經我以為是array,還鬧過笑話...囧
  • cookie 有域和路徑這個概念。域就是domain的概念,因為瀏覽器是個注意安全的環境,所以不同的域之間是不能互相訪問 cookie 的(當然可以通過特殊設定的達到 cookie 跨域訪問)。路徑就是routing的概念,一個網頁所建立的 cookie 只能被與這個網頁在同一目錄或子目錄下得所有網頁訪問,而不能被其他目錄下得網頁訪問(這句話有點繞,一會看個例子就好理解了)。
  • 其實建立cookie的方式和定義變數的方式有些相似,都需要使用 cookie 名稱和 cookie 值。同個網站可以建立多個 cookie ,而多個 cookie 可以存放在同一個cookie 檔案中。
  Cookie常見問題
  • cookie 存在兩種型別:
    • 你瀏覽的當前網站本身設定的 cookie
    • 來自在網頁上嵌入廣告或圖片等其他域來源的 第三方 cookie (網站可通過使用這些 cookie 跟蹤你的使用資訊)
  • 剛剛基礎知識裡面有說到 cookie 生命週期的問題,其實 cookie 大致可分為兩種狀態:
    • 臨時性質的cookie。當前使用的過程中網站會儲存一些你的個人資訊,當瀏覽器關閉後這些資訊也會從計算機中刪除
    • 設定失效時間的cookie。就算瀏覽器關閉了,這些資訊業依然會在計算機中。如 登入名稱和密碼,這樣無須在每次到特定站點時都進行登入。這種cookie 可在計算機中保留幾天、幾個月甚至幾年
  • cookie 有兩種清除方式:
    • 通過瀏覽器工具清除 cookie (有第三方的工具,瀏覽器自身也有這種功能)
    • 通過設定 cookie 的有效期來清除 cookie
    • 注:刪除 cookie 有時可能導致某些網頁無法正常執行
  • 瀏覽器可以通過設定來接受和拒絕訪問 cookie。
  • 出於功能和效能的原因考慮,建議儘量降低 cookie 的使用數量,並且要儘量使用小 cookie。
  • 關於cookie編碼的細節問題將會在cookie高階篇中單獨介紹。
  • 假如是本地磁碟中的頁面,chrome的控制檯是無法用JavaScript讀寫操作 cookie 的,解決辦法...換一個瀏覽器^_^。

  Cookie基礎用法

  一.簡單的存取操作

  在使用JavaScript存取 cookie 時,必須要使用Document物件的 cookie 屬性;一行程式碼介紹如何建立和修改一個 cookie :

  document.cookie  = 'username=Darren'

  以上程式碼中'username'表示 cookie 名稱,'Darren'表示這個名稱對應的值。假設 cookie 名稱並不存在,那麼就是建立一個新的 cookie;如果存在就是修改了這個 cookie 名稱對應的值。如果要多次建立 cookie ,重複使用這個方法即可。

  二.cookie的讀取操作

  要精確的對 cookie 進行讀取其實很簡單,就是對字串進行操作。從w3school上copy這段程式碼來做分析:

複製程式碼
function getCookie(c_name){
    if (document.cookie.length>0){  //先查詢cookie是否為空,為空就return ""      c_start=document.cookie.indexOf(c_name + "=")  //通過String物件的indexOf()來檢查這個cookie是否存在,不存在就為 -1      if (c_start!=-1){ 
        c_start=c_start + c_name.length+1  //最後這個+1其實就是表示"="號啦,這樣就獲取到了cookie值的開始位置
        c_end=document.cookie.indexOf(";",c_start)  //其實我剛看見indexOf()第二個引數的時候猛然有點暈,後來想起來表示指定的開始索引的位置...這句是為了得到值的結束位置。因為需要考慮是否是最後一項,所以通過";"號是否存在來判斷
        if (c_end==-1) c_end=document.cookie.length          return unescape(document.cookie.substring(c_start,c_end))  //通過substring()得到了值。想了解unescape()得先知道escape()是做什麼的,都是很重要的基礎,想了解的可以搜尋下,在文章結尾處也會進行講解cookie編碼細節
      } 
    }
    return ""
  }  
複製程式碼

  當然想實現讀取cookie的方法還有不少,比如陣列,正則等,這裡就不往細說了。

  三.設定cookie的有效期

  文章中常常出現的 cookie 的生命週期也就是有效期和失效期,即 cookie 的存在時間。在預設的情況下,cookie 會在瀏覽器關閉的時候自動清除,但是我們可以通過expires來設定 cookie 的有效期。語法如下:

  document.cookie = "name=value;expires=date"

  上面程式碼中的date值為GMT(格林威治時間)格式的日期型字串,生成方式如下:

  var _date = new Date();
_date.setDate(_date.getDate()+30);
  _date.toGMTString();

  上面三行程式碼分解為幾步來看:

  • 通過new生成一個Date的例項,得到當前的時間;
  • getDate()方法得到當前本地月份中的某一天,接著加上30就是我希望這個cookie能過在本地儲存30天;
  • 接著通過setDate()方法來設定時間;
  • 最後 用toGMTString()方法把Date物件轉換為字串,並返回結果

  通過下面這個完整的函式來說明在建立 cookie 的過程中我們需要注意的地方 - 從w3school複製下來的。建立一個在 cookie 中儲存資訊的函式:

複製程式碼
1  function setCookie(c_name, value, expiredays){
2     var exdate=new Date();
3     exdate.setDate(exdate.getDate() + expiredays);
4     document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
5   }
6   使用方法:setCookie('username','Darren',30)  
複製程式碼

  現在我們這個函式是按照天數來設定cookie的有效時間,如果想以其他單位(如:小時)來設定,那麼改變第三行程式碼即可:

  exdate.setHours(exdate.getHours() + expiredays);

  這樣設定以後的cookie有效期就是按照小時為單位的。

  常見問題中有提到清除 cookie 的兩種方法,現在要說的是使 cookie 失效,通過把有效期的時間設定為一個已過期的時間。既然已經有了設定有效期的方法,那麼設定失效期的方法就請感興趣的朋友自己動手了^_^。下面繼續比較深的cookie話題。

  Cookie 高階篇

  一.cookie 路徑概念

  在基礎知識中有提到 cookie 有域和路徑的概念,現在來介紹路徑在 cookie 中的作用。

  cookie 一般都是由於使用者訪問頁面而被建立的,可是並不是只有在建立 cookie 的頁面才可以訪問這個 cookie。

  預設情況下,只有與建立 cookie 的頁面在同一個目錄或子目錄下的網頁才可以訪問,這個是因為安全方面的考慮,造成不是所有頁面都可以隨意訪問其他頁面建立的 cookie。舉個例子:

  在 "http://www.cnblogs.com/Darren_code/" 這個頁面建立一個cookie,那麼在"/Darren_code/"這個路徑下的頁面如: "http://www.cnblogs.com/Darren_code/archive/2011/11/07/Cookie.html"這個頁面預設就能取到cookie資訊。

  可在預設情況下, "http://www.cnblogs.com"或者 "http://www.cnblogs.com/xxxx/" 就不可以訪問這個 cookie(光看沒用,實踐出真理^_^)。

  那麼如何讓這個 cookie 能被其他目錄或者父級的目錄訪問類,通過設定 cookie 的路徑就可以實現。例子如下:

  document.cookie = "name=value;path=path"
  document.cookie = "name=value;expires=date;path=path"

   紅色字型path就是 cookie 的路徑,最常用的例子就是讓 cookie 在跟目錄下,這樣不管是哪個子頁面建立的 cookie,所有的頁面都可以訪問到了:

  document.cookie = "name=Darren;path=/"

  二.cookie 域概念

  路徑能解決在同一個域下訪問 cookie 的問題,咱們接著說 cookie 實現同域之間訪問的問題。語法如下:

  document.cookie = "name=value;path=path;domain=domain"

  紅色的domain就是設定的 cookie 域的值。

  例如 "www.qq.com" 與 "sports.qq.com" 公用一個關聯的域名"qq.com",我們如果想讓 "sports.qq.com" 下的cookie被 "www.qq.com" 訪問,我們就需要用到 cookie 的domain屬性,並且需要把path屬性設定為 "/"。例:

  document.cookie = "username=Darren;path=/;domain=qq.com"

  注:一定的是同域之間的訪問,不能把domain的值設定成非主域的域名。

  三.cookie 安全性

  通常 cookie 資訊都是使用HTTP連線傳遞資料,這種傳遞方式很容易被檢視,所以 cookie 儲存的資訊容易被竊取。假如 cookie 中所傳遞的內容比較重要,那麼就要求使用加密的資料傳輸。

  所以 cookie 的這個屬性的名稱是“secure”,預設的值為空。如果一個 cookie 的屬性為secure,那麼它與伺服器之間就通過HTTPS或者其它安全協議傳遞資料。語法如下:

  document.cookie = "username=Darren;secure"

  把cookie設定為secure,只保證 cookie 與伺服器之間的資料傳輸過程加密,而儲存在本地的 cookie檔案並不加密。如果想讓本地cookie也加密,得自己加密資料。

  注:就算設定了secure 屬性也並不代表他人不能看到你機器本地儲存的 cookie 資訊,所以說到底,別把重要資訊放cookie就對了,囧...

  四.cookie 編碼細節

  原本來想在常見問題那段介紹cookie編碼的知識,因為如果對這個不瞭解的話編碼問題確實是一個坑,所以還是詳細說說。

  在輸入cookie資訊時不能包含空格,分號,逗號等特殊符號,而在一般情況下,cookie 資訊的儲存都是採用未編碼的方式。所以,在設定 cookie 資訊以前要先使用escape()函式將 cookie 值資訊進行編碼,在獲取到 cookie 值得時候再使用unescape()函式把值進行轉換回來。如設定cookie時:

  document.cookie = name + "="+ escape (value)

  再看看基礎用法時提到過的getCookie()內的一句:

  return unescape(document.cookie.substring(c_start,c_end))

  這樣就不用擔心因為在cookie值中出現了特殊符號而導致 cookie 資訊出錯了。

  總結

  在工作中越來越感覺到基礎的重要性了,有很多技術細節都是要懂不懂或者的懂的不多。為了改善這種情況,打算以後會對知識的細節從點到面的去理解,然後再寫部落格加深印象,也能分享給更多有需要的朋友。