JavaScript 學習筆記— —cookie

標籤：

什麼是 Cookie

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

從JavaScript的角度看，cookie 就是一些字串資訊。這些資訊存放在用戶端的電腦中，用於用戶端電腦與伺服器之間傳遞資訊。
在JavaScript中可以通過 document.cookie 來讀取或設定這些資訊。由於 cookie 多用在用戶端和服務端之間進行通訊，所以除了JavaScript以外，服務端的語言（如PHP）也可以存取 cookie。

Cookie 基礎知識

• cookie 存在兩種類型：
  • 你瀏覽的當前網站本身設定的 cookie
  • 來自在網頁上嵌入廣告或圖片等其他域來源的 第三方 cookie (網站可通過使用這些 cookie 跟蹤你的使用資訊)

• 剛剛基礎知識裡面有說到 cookie 生命週期的問題，其實 cookie 大致可分為兩種狀態：
  • 臨時性質的cookie。當前使用的過程中網站會儲存一些你的個人資訊，當瀏覽器關閉後這些資訊也會從電腦中刪除
  • 設定失效時間的cookie。就算瀏覽器關閉了，這些資訊業依然會在電腦中。如 登入名稱稱和密碼，這樣無須在每次到特定網站時都進行登入。這種cookie 可在電腦中保留幾天、幾個月甚至幾年
• cookie 有兩種清除方式：
  • 通過瀏覽器工具清除 cookie (有第三方的工具，瀏覽器自身也有這種功能)
  • 通過設定 cookie 的有效期間來清除 cookie
  • 註：刪除 cookie 有時可能導致某些網頁無法正常運行
• 瀏覽器可以通過設定來接受和拒絕訪問 cookie。
• 出於功能和效能的原因考慮，建議盡量降低 cookie 的使用數量，並且要盡量使用小 cookie。
• 關於cookie編碼的細節問題將會在cookie進階篇中單獨介紹。

Cookie基礎用法

 

一.簡單的存取操作

　　在使用JavaScript存取 cookie 時，必須要使用Document對象的 cookie 屬性；一行代碼介紹如何建立和修改一個 cookie ：

　　document.cookie  = ‘username=Darren‘

　　以上代碼中‘username‘表示 cookie 名稱，‘Darren‘表示這個名稱對應的值。假設 cookie 名稱並不存在，那麼就是建立一個新的 cookie；如果存在就是

二.cookie 方法

//設定cookie    function setCookie(name,value,day){//cookie：名稱，值，到期時間        var date=new Date();        date.setDate(date.getDate()+day);        //document.cookie=name+"="+value+";expires="+date;       document.cookie=name+ "=" + value + ((day==null) ? "" : ";expires="+date);    }    //獲得cookie    function getCookie(name){         // cookie存放都是一中字串：userName=haha; passWord=123; sex=man; age=29        var arr=document.cookie.split("; ");        //分割成數組[userName=haha, passWord=123,sex=man,age=29]        for(var i=0;i<arr.length;i++){            var arr2=arr[i].split("=");            //[userName,haha]            if(arr2[0]==name){                return arr2[1]            }        }        return "";            }    //刪除cookie    function removeCookie(name){        setCookie(name,"1",-1);    }        setCookie("userName","haha",7);    setCookie("passWord","123",1);    setCookie("sex","man",1);    setCookie("age","29",1);    setCookie("test","29",1);    setCookie("test2","30");    alert(getCookie("userName"))    removeCookie("userName")    alert(document.cookie)

　現在這個函數是按照天數來設定cookie的有效時間，如果想以其他單位（如：小時）來設定，那麼改變第三行代碼即可：

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

　　這樣設定以後的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 資訊出錯了。

 

原文參考：

聶微東
出處：http://www.cnblogs.com/Darren_code

JavaScript 學習筆記— —cookie