JavaScript操作Cookie詳解
什么是 Cookie
“cookie 是存儲于訪問者的計算機中的變量。每當(dāng)同一臺計算機通過瀏覽器請求某個頁面時，就會發(fā)送這個 cookie。你可以使用 JavaScript 來創(chuàng)建和取回 cookie 的值?！?- w3school
cookie 是訪問過的網(wǎng)站創(chuàng)建的文件，用于存儲瀏覽信息，例如個人資料信息。
從JavaScript的角度看，cookie 就是一些字符串信息。這些信息存放在客戶端的計算機中，用于客戶端計算機與服務(wù)器之間傳遞信息。
在JavaScript中可以通過 document.cookie 來讀取或設(shè)置這些信息。由于 cookie 多用在客戶端和服務(wù)端之間進行通信，所以除了JavaScript以外，服務(wù)端的語言（如PHP）也可以存取 cookie。
Cookie 基礎(chǔ)知識
cookie 是有大小限制的，每個 cookie 所存放的數(shù)據(jù)不能超過4kb，如果 cookie 字符串的長度超過4kb，則該屬性將返回空字符串。
由于 cookie 最終都是以文件形式存放在客戶端計算機中，所以查看和修改 cookie 都是很方便的，這就是為什么常說 cookie 不能存放重要信息的原因。
每個 cookie 的格式都是這樣的：<cookie名>=<值>；名稱和值都必須是合法的標(biāo)示符。
cookie 是存在 有效期的。在默認(rèn)情況下，一個 cookie 的生命周期就是在瀏覽器關(guān)閉的時候結(jié)束。如果想要 cookie 能在瀏覽器關(guān)掉之后還可以使用，就必須要為該 cookie 設(shè)置有效期，也就是 cookie 的失效日期。
alert(typeof document.cookie) 結(jié)果是 string，曾經(jīng)我以為是array，還鬧過笑話…囧
cookie 有域和路徑這個概念。域就是domain的概念，因為瀏覽器是個注意安全的環(huán)境，所以不同的域 之間是不能互相訪問 cookie 的(當(dāng)然可以通過特殊設(shè)置的達(dá)到 cookie 跨域訪問)。路徑就是routing的概念，一個網(wǎng)頁所創(chuàng)建的 cookie 只能被與這個網(wǎng)頁在同一目錄或子目錄下得所有網(wǎng)頁訪問，而不能被其他目錄下得網(wǎng)頁訪問（這句話有點繞，一會看個例子就好理解了）。
其實創(chuàng)建cookie的方式和定義變量的方式有些相似，都需要使用 cookie 名稱和 cookie 值。同個網(wǎng)站可以創(chuàng)建多個 cookie ，而多個 cookie 可以存放在同一個cookie 文件中。
Cookie常見問題
cookie 存在兩種類型：
你瀏覽的當(dāng)前網(wǎng)站本身設(shè)置的 cookie
來自在網(wǎng)頁上嵌入廣告或圖片等其他域來源的 第三方 cookie (網(wǎng)站可通過使用這些 cookie 跟蹤你的使用信息)
剛剛基礎(chǔ)知識里面有說到 cookie 生命周期的問題，其實 cookie 大致可分為兩種狀態(tài)：
臨時性質(zhì)的cookie。當(dāng)前使用的過程中網(wǎng)站會儲存一些你的個人信息，當(dāng)瀏覽器關(guān)閉后這些信息也會從計算機中刪除
設(shè)置失效時間的cookie。就算瀏覽器關(guān)閉了，這些信息業(yè)依然會在計算機中。如 登錄名稱和密碼，這樣無須在每次到特定站點時都進行登錄。這種cookie 可在計算機中保留幾天、幾個月甚至幾年
cookie 有兩種清除方式：
通過瀏覽器工具清除 cookie (有第三方的工具，瀏覽器自身也有這種功能)
通過設(shè)置 cookie 的有效期來清除 cookie
注：刪除 cookie 有時可能導(dǎo)致某些網(wǎng)頁無法正常運行
瀏覽器可以通過設(shè)置來接受和拒絕訪問 cookie。
出于功能和性能的原因考慮，建議盡量降低 cookie 的使用數(shù)量，并且要盡量使用小 cookie。
關(guān)于cookie編碼的細(xì)節(jié)問題將會在cookie高級篇中單獨介紹。
假如是本地磁盤中的頁面，chrome的控制臺是無法用JavaScript讀寫操作 cookie 的，解決辦法…換一個瀏覽器^_^。
Cookie基礎(chǔ)用法
一.簡單的存取操作
在使用JavaScript存取 cookie 時，必須要使用Document對象的 cookie 屬性；一行代碼介紹如何創(chuàng)建和修改一個 cookie ：
document.cookie = 'username=Darren';
以上代碼中'username'表示 cookie 名稱，'Darren'表示這個名稱對應(yīng)的值。假設(shè) cookie 名稱并不存在，那么就是創(chuàng)建一個新的 cookie；如果存在就是修改了這個 cookie 名稱對應(yīng)的值。如果要多次創(chuàng)建 cookie ，重復(fù)使用這個方法即可。
二.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()第二個參數(shù)的時候猛然有點暈，后來想起來表示指定的開始索引的位置...這句是為了得到值的結(jié)束位置。因為需要考慮是否是最后一項，所以通過";"號是否存在來判斷
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end)) //通過substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基礎(chǔ)，想了解的可以搜索下，在文章結(jié)尾處也會進行講解cookie編碼細(xì)節(jié)
}
}
return ""
}
當(dāng)然想實現(xiàn)讀取cookie的方法還有不少，比如數(shù)組，正則等，這里就不往細(xì)說了。
三.設(shè)置cookie的有效期
文章中常常出現(xiàn)的 cookie 的生命周期也就是有效期和失效期，即 cookie 的存在時間。在默認(rèn)的情況下，cookie 會在瀏覽器關(guān)閉的時候自動清除，但是我們可以通過expires來設(shè)置 cookie 的有效期。語法如下：
document.cookie = "name=value;expires=date";
上面代碼中的date值為GMT(格林威治時間)格式的日期型字符串，生成方式如下：
var _date = new Date();
_date.setDate(_date.getDate()+30);
_date.toGMTString();
上面三行代碼分解為幾步來看：
通過new生成一個Date的實例，得到當(dāng)前的時間；
getDate()方法得到當(dāng)前本地月份中的某一天，接著加上30就是我希望這個cookie能過在本地保存30天；
接著通過setDate()方法來設(shè)置時間；
最后 用toGMTString()方法把Date對象轉(zhuǎn)換為字符串，并返回結(jié)果
通過下面這個完整的函數(shù)來說明在創(chuàng)建 cookie 的過程中我們需要注意的地方 – 從w3school復(fù)制下來的。創(chuàng)建一個在 cookie 中存儲信息的函數(shù)：
function setCookie(c_name, value, expiredays){
var exdate=new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
//使用方法：setCookie('username','Darren',30)
現(xiàn)在我們這個函數(shù)是按照天數(shù)來設(shè)置cookie的有效時間，如果想以其他單位（如：小時）來設(shè)置，那么改變第三行代碼即可：
exdate.setHours(exdate.getHours() + expiredays);
這樣設(shè)置以后的cookie有效期就是按照小時為單位的。
常見問題中有提到清除 cookie 的兩種方法，現(xiàn)在要說的是使 cookie 失效，通過把有效期的時間設(shè)置為一個已過期的時間。既然已經(jīng)有了設(shè)置有效期的方法，那么設(shè)置失效期的方法就請感興趣的朋友自己動手了^_^。下面繼續(xù)比較深的cookie話題。
Cookie 高級篇
一.cookie 路徑概念
在基礎(chǔ)知識中有提到 cookie 有域和路徑的概念，現(xiàn)在來介紹路徑在 cookie 中的作用。
cookie 一般都是由于用戶訪問頁面而被創(chuàng)建的，可是并不是只有在創(chuàng)建 cookie 的頁面才可以訪問這個 cookie。
默認(rèn)情況下，只有與創(chuàng)建 cookie 的頁面在同一個目錄或子目錄下的網(wǎng)頁才可以訪問，這個是因為安全方面的考慮，造成不是所有頁面都可以隨意訪問其他頁面創(chuàng)建的 cookie。舉個例子：
在 “http://www.dbjr.com.cn/Darren_code/” 這個頁面創(chuàng)建一個cookie，那么在”/Darren_code/”這個路徑下的頁面如： “http://www.dbjr.com.cn/Darren_code/archive/2011/11/07/Cookie.html”這個頁面默 認(rèn)就能取到cookie信息。
可在默認(rèn)情況下， “http://www.dbjr.com.cn”或者 “http://www.dbjr.com.cn/xxxx/” 就不可以訪問這個 cookie（光看沒用，實踐出真理^_^）。
那么如何讓這個 cookie 能被其他目錄或者父級的目錄訪問類，通過設(shè)置 cookie 的路徑就可以實現(xiàn)。例子如下：
document.cookie = "name=value;path=path"
document.cookie = "name=value;expires=date;path=path"
紅色字體path就是 cookie 的路徑，最常用的例子就是讓 cookie 在跟目錄下,這樣不管是哪個子頁面創(chuàng)建的 cookie，所有的頁面都可以訪問到了:
document.cookie = "name=Darren;path=/";
二.cookie 域概念
路徑能解決在同一個域下訪問 cookie 的問題，咱們接著說 cookie 實現(xiàn)同域之間訪問的問題。語法如下：
document.cookie = "name=value;path=path;domain=domain";
紅色的domain就是設(shè)置的 cookie 域的值。
例如 ”www.qq.com” 與 “sports.qq.com” 公用一個關(guān)聯(lián)的域名”qq.com”，我們?nèi)绻胱?“sports.qq.com” 下的cookie被 ”www.qq.com” 訪問，我們就需要用到 cookie 的domain屬性，并且需要把path屬性設(shè)置為 “/”。例：
document.cookie = "username=Darren;path=/;domain=qq.com";
注：一定的是同域之間的訪問，不能把domain的值設(shè)置成非主域的域名。
三.cookie 安全性
通常 cookie 信息都是使用HTTP連接傳遞數(shù)據(jù)，這種傳遞方式很容易被查看，所以 cookie 存儲的信息容易被竊取。假如 cookie 中所傳遞的內(nèi)容比較重要，那么就要求使用加密的數(shù)據(jù)傳輸。
所以 cookie 的這個屬性的名稱是“secure”，默認(rèn)的值為空。如果一個 cookie 的屬性為secure，那么它與服務(wù)器之間就通過HTTPS或者其它安全協(xié)議傳遞數(shù)據(jù)。語法如下：
document.cookie = "username=Darren;secure"
把cookie設(shè)置為secure，只保證 cookie 與服務(wù)器之間的數(shù)據(jù)傳輸過程加密，而保存在本地的 cookie文件并不加密。如果想讓本地cookie也加密，得自己加密數(shù)據(jù)。
注：就算設(shè)置了secure 屬性也并不代表他人不能看到你機器本地保存的 cookie 信息，所以說到底，別把重要信息放cookie就對了，囧…
四.cookie 編碼細(xì)節(jié)
原本來想在常見問題那段介紹cookie編碼的知識，因為如果對這個不了解的話編碼問題確實是一個坑，所以還是詳細(xì)說說。
在輸入cookie信息時不能包含空格，分號，逗號等特殊符號，而在一般情況下，cookie 信息的存儲都是采用未編碼的方式。所以，在設(shè)置 cookie 信息以前要先使用escape()函數(shù)將 cookie 值信息進行編碼，在獲取到 cookie 值得時候再使用unescape()函數(shù)把值進行轉(zhuǎn)換回來。如設(shè)置cookie時：
document.cookie = name + "="+ escape (value);
再看看基礎(chǔ)用法時提到過的getCookie()內(nèi)的一句：
return unescape(document.cookie.substring(c_start,c_end));
這樣就不用擔(dān)心因為在cookie值中出現(xiàn)了特殊符號而導(dǎo)致 cookie 信息出錯了。
個人代碼
/*設(shè)置Cookie*/
function setCookie(c_name, value, expiredays, path, domain, secure) {
var exdate = new Date(); //獲取當(dāng)前時間
exdate.setDate(exdate.getDate() + expiredays); //過期時間
document.cookie = c_name + "=" + //cookie名稱
escape(value) + //將cookie值進行編碼
((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()) + //設(shè)置過期時間
((path == null) ? '/' : ';path=' + path) + //設(shè)置訪問路徑
((domain == null) ? '' : ';domain=' + domain) + //設(shè)置訪問域
((secure == null) ? '' : ';secure=' + secure); //設(shè)置是否加密
};
setCookie('test', 'name=sheng;sex=men;lancer=dullbear', 30);
setCookie('bb', 'name=sheng;sex=men', 30);
/*獲取Cookie*/
function getCookie(c_name, index) {
var cookies = document.cookie; //獲取cookie值
var cookieLen = cookies.length; //獲取cookie長度
if (cookieLen > 0) { //cookie不為空時
var c_start = cookies.indexOf(c_name + '='); //查找需要cookie值在cookie中序號
if (c_start > -1) { //cookie值存在時
c_start += c_name.length + 1; //獲取cookie值開始序列號
var c_end = cookies.indexOf(';', c_start); //獲取cookie值結(jié)束序列號
if (c_end == -1) { //當(dāng)cookie是最后一個時
c_end = cookieLen; //設(shè)置cookie值結(jié)束序列號為cookie長度
};
var cookieStr = unescape(cookies.substring(c_start, c_end)); //獲取解碼cookie值
var cookieObj = cookieStr.split(';'); //分割cookie值
index = ((index == null) ? 0 : index); //判斷index是否傳值
var goalObj = cookieObj[index]; //索引數(shù)組
var goalStr = goalObj.split('=');
var getcook = goalStr[1]; //獲取需要取的cookie值
return getcook;
};
} else {
console.log('頁面沒有cookie');
}
};
alert(getCookie('test', 0)); //打印查詢cookie值
相關(guān)文章
這篇文章主要介紹了7個JS基礎(chǔ)知識,需要的朋友可以參考下2014-03-03
在JavaScript中，定義函數(shù)最常用的方法就是調(diào)用function語句。該語句是由function關(guān)鍵字構(gòu)成的，也是很重要的函數(shù)復(fù)用。2009-09-09
JavaScript不能像PHP一樣在函數(shù)參數(shù)中直接設(shè)置默認(rèn)值，但是JavaScript有一個arguments可以使用，這就可以為函數(shù)參數(shù)設(shè)置默認(rèn)值了2014-10-10
這篇文章主要介紹了從原型與原型鏈開始講起，如果你想知道構(gòu)造函數(shù)的實例的原型，原型的原型，原型的原型的原型是什么，就來看看這篇文章吧。下面小編就來帶大家一起學(xué)習(xí)一下2019-06-06
JavaScript中g(shù)etUTCSeconds()方法的使用詳解
這篇文章主要介紹了JavaScript中g(shù)etUTCSeconds()方法的使用詳解,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了JavaScript中的italics()方法使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了Javascript 事件冒泡機制詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-10-10
this的指向在函數(shù)定義的時候是確定不了的，只有函數(shù)執(zhí)行的時候才能確定this到底指向誰，實際上this的最終指向的是那個調(diào)用它的對象，接下來我會深入的探討這個問題。2016-04-04
好久沒看Three.js源碼了。今天天氣不錯，接著看;這次從光照部分看起：光照模型，從光線本身角度來看包括環(huán)境光、平行光、點光源，從物體表面材質(zhì)角度看又包括漫反射和鏡面反射,需要了解的朋友可以參考下2012-12-12
2008-01-01