Cookie基礎知識

2024-04-27 15:08:27

字體：大中小

來源：轉載

供稿：網友

　　什么是 Cookie

　　“cookie 是存儲于訪問者的計算機中的變量。每當同一臺計算機通過瀏覽器請求某個頁面時，就會發送這個 cookie。你可以使用 javaScript 來創建和取回 cookie 的值?！?- Vevb　　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 進行讀取其實很簡單，就是對字符串進行操作。從Vevb上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 的過程中我們需要注意的地方 - 從Vevb復制下來的。創建一個在 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 信息出錯了。
　　總結
　　在工作中越來越感覺到基礎的重要性了，有很多技術細節都是要懂不懂或者的懂的不多。為了改善這種情況，打算以后會對知識的細節從點到面的去理解，然后再寫博客加深印象，也能分享給更多有需要的朋友。
盡管document.cookie看上去就像一個屬性，可以賦不同的值。但它和一般的屬性不一樣，改變它的賦值并不意味著丟失原來的值，例如：document.cookie="userId=828"; document.cookie="userName=hulk"; 
Cookie/session機制詳解
http://blog.csdn.net/fangaoxin/article/details/6952954/
實例應用
　　　　　　　　 　　　　　 　　　　　　　　　　　　【搜索頁】 　　　　　　　　 　　　　　　　　　　　　　　　　　【搜索結果頁】
需求
　　將用戶搜索過的關鍵字保存起來
實現思路
　　用戶通過點擊熱門搜索、歷史搜索中的關鍵字或者是在搜索框輸入關鍵字之后點擊搜索按鈕都會進入到搜索結果頁面。所以，我們的思路是：　　當搜索結果頁面加載完畢時，將關鍵字和關鍵字對應的鏈接地址存起來，當搜索頁重新加載時，將保存的記錄顯示到界面上。
代碼
公共js
/** * History * 用法 * var his = new History('key');  // 參數標示cookie的鍵值 * his.add("標題", "連接 比如 http://www.baidu.com", "其他內容")；  * 得到歷史數據 返回的是json數據 * var data = his.getList();  // [{title:"標題", "link": "http://www.baidu.com"}] *  */function History(key) {    this.limit = 10;  // 最多10條記錄    this.key = key || 'y_his';  // 鍵值    this.jsonData = null;  // 數據緩存    this.cacheTime = 24;  // 24 小時    this.path = '/';  // cookie path}History.PRototype = {    constructor : History    ,setCookie: function(name, value, expiresHours, options) {        options = options || {};        var cookieString = name + '=' + encodeURIComponent(value);        //判斷是否設置過期時間        if(undefined != expiresHours){            var date = new Date();            date.setTime(date.getTime() + expiresHours * 3600 * 1000);            cookieString = cookieString + '; expires=' + date.toUTCString();        }        var other = [            options.path ? '; path=' + options.path : '',            options.domain ? '; domain=' + options.domain : '',            options.secure ? '; secure' : ''        ].join('');        document.cookie = cookieString + other;     }    ,getCookie: function(name) {        // cookie 的格式是個個用分號空格分隔        var arrCookie = document.cookie ? document.cookie.split('; ') : [],            val = '',            tmpArr = '';        for(var i=0; i<arrCookie.length; i++) {            tmpArr = arrCookie[i].split('=');            tmpArr[0] = tmpArr[0].replace(' ', '');  // 去掉空格            if(tmpArr[0] == name) {                val = decodeURIComponent(tmpArr[1]);                break;            }        }        return val.toString();    }    ,deleteCookie: function(name) {        this.setCookie(name, '', -1, {"path" : this.path});        //console.log(document.cookie);    }    ,initRow : function(title, link, other) {        return '{"title":"'+title+'", "link":"'+link+'", "other":"'+other+'"}';    }    ,parse2Json : function(jsonStr) {        var json = [];        try {            json = JSON.parse(jsonStr);        } catch(e) {            //alert('parse error');return;            json = eval(jsonStr);        }        return json;    }    // 添加記錄    ,add : function(title, link, other) {        var jsonStr = this.getCookie(this.key);        //alert(jsonStr); return;        if("" != jsonStr) {            this.jsonData = this.parse2Json(jsonStr);            // 排重            for(var x=0; x<this.jsonData.length; x++) {                if(link == this.jsonData[x]['link']) {                    return false;                }            }            // 重新賦值 組裝 json 字符串            jsonStr = '[' + this.initRow(title, link, other) + ',';            for(var i=0; i<this.limit-1; i++) {                if(undefined != this.jsonData[i]) {                    jsonStr += this.initRow(this.jsonData[i]['title'], this.jsonData[i]['link'], this.jsonData[i]['other']) + ',';                } else {                    break;                }            }            jsonStr = jsonStr.substring(0, jsonStr.lastIndexOf(','));            jsonStr += ']';        } else {            jsonStr = '['+ this.initRow(title, link, other) +']';        }        //alert(jsonStr);        this.jsonData = this.parse2Json(jsonStr);        this.setCookie(this.key, jsonStr, this.cacheTime, {"path" : this.path});    }    // 得到記錄    ,getList : function() {        // 有緩存直接返回        if(null != this.jsonData) {            return this.jsonData;  // Array        }         // 沒有緩存從 cookie 取        var jsonStr = this.getCookie(this.key);        if("" != jsonStr) {            this.jsonData = this.parse2Json(jsonStr);        }        return this.jsonData;    }    // 清空歷史    ,clearHistory : function() {        this.deleteCookie(this.key);        this.jsonData = null;    }};123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126調用添加歷史記錄的方法
document.onreadystatechange = function(){      if(document.readyState=="complete")      {          var his = new History('key');        var keyWord=document.getElementById("keyword").value;               his.add(keyword, "wx_searchPro.action?keyword="+keyword, "");    }}       123456789123456789顯示歷史記錄到頁面上
$(document).ready(function(){     var his = new History('key');     var data = his.getList();     for(var i=0;i<data.length;i++){         var a=document.createElement('a');            var href=data[i].link;         a.setAttribute('href',href);         a.style["textDecoration"]="none";         a.style["color"]="#000";                var t=document.createTextNode(data[i].title);         a.appendChild(t);         var span=document.createElement("span");         var space=document.createTextNode("　　");         span.appendChild(space);         if(document.getElementById("history")!=null){            document.getElementById("history").appendChild(a);            document.getElementById("history").appendChild(span);          }     }});12345678910111213141516171819202122231234567891011121314151617181920212223頁面
<h4>歷史搜索：</h4><div id="history"></div>1212總結
設置cookie
以分號隔開的鍵值對組成的字符串賦值給document.cookie。 如：
document.cookie="title=Marry;expires=3600"11讀取cookie
因為 cookie 的格式是個個用分號空格分隔，所以用split(‘;’)
var arrCookie = document.cookie ? document.cookie.split('; ') : []；11刪除cookie
原理就是設置cookie的expires參數為已經過期的一個時間，第三個參數是多少小時之后過期
setCookie: function(name, value, expiresHours, options){     var date = new Date();         date.setTime(date.getTime() + expiresHours * 3600 * 1000);}12341234在當前時間的基礎上退后幾個小時，如果我們要刪除cookie，就傳一個復數，這樣的話過期的時間早于當前時間，說明已經過期啦，一般咱們就傳-1就可以啦。
轉載：http://blog.csdn.net/u010924834/article/details/50544284