站長(zhǎng)資訊網(wǎng)
方法：1、用“document.cookie="名稱(chēng)=值;"”語(yǔ)句來(lái)設(shè)置cookie或者修改cookie值；2、用“document.cookie”語(yǔ)句獲取cookie值；3、通過(guò)將有效時(shí)間“expires”設(shè)置為過(guò)期值來(lái)刪除cookie。
本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
cookie 是存儲(chǔ)于訪問(wèn)者的計(jì)算機(jī)中的變量，當(dāng)用戶(hù)訪問(wèn)了某個(gè)網(wǎng)站時(shí)，就可以通過(guò) cookie 向訪問(wèn)者計(jì)算機(jī)上存儲(chǔ)數(shù)據(jù)。之后，當(dāng)用戶(hù)在同一臺(tái)計(jì)算機(jī)通過(guò)瀏覽器再次請(qǐng)求該頁(yè)面時(shí)，會(huì)發(fā)送這個(gè) cookie，因而可以使用 cookie 來(lái)識(shí)別用戶(hù)。
1. 設(shè)置cookie
使用 cookie 來(lái)存儲(chǔ)數(shù)據(jù)是通過(guò)設(shè)置 cookie 來(lái)實(shí)現(xiàn)的。每個(gè) cookie 都是一個(gè)名/值對(duì)，名/值對(duì)用等號(hào)連接，并將該名/值對(duì)賦值給 document.cookie 即可。一次可以將多個(gè)名/值對(duì)賦給 document.cookie，并使用分號(hào)加空格隔開(kāi)每個(gè)名/值對(duì)。
設(shè)置 cookie 的基本格式如下：
document.cookie = "名稱(chēng)1=值1[; 名稱(chēng)2=值2; …]";
設(shè)置 cookie 的示例如下：
document.cookie = "username=abc"; document.cookie = "age=23"; document.cookie = "username=abc; age=23";
需要注意的是，在 cookie 的名稱(chēng)或值中不能使用分號(hào)；和等號(hào)=等符號(hào)。如果想存入這些符號(hào)，需要使用 escape() 函數(shù)進(jìn)行編碼。例如：document.cookie="str="+escape("username=nch")，該代碼等效于：document.cookie="str=username%3Dnch"，即等號(hào)被編碼為%3D。當(dāng)使用 escape() 編碼后，在取出值以后需要使用 unescape() 進(jìn)行解碼才能得到原來(lái)的 cookie 值。
另外，使用上述格式設(shè)置的 cookie 中的值在用戶(hù)計(jì)算機(jī)中存儲(chǔ)時(shí)，是以網(wǎng)站域名形式來(lái)區(qū)分不同網(wǎng)站的數(shù)據(jù)，而且不同瀏覽器存放 cookie 的位置不一樣，因此不同瀏覽器之間存儲(chǔ)的 cookie 不可以相互訪問(wèn)。另外，同一個(gè)域名下存放的 cookie 的個(gè)數(shù)是有限制的，不同的瀏覽器對(duì)存放的個(gè)數(shù)限制不一樣。而且，每個(gè) cookie 存放的內(nèi)容大小也是有限制的，不同的瀏覽器該大小限制也不一樣。
2. 修改cookie值
如果要改變一個(gè) cookie 值，只需對(duì)它重新賦值，例如：document.cookie="age=36";這樣就可以修改前面設(shè)置的 age=23 的 cookie 值。
3. 獲取cookie
通過(guò) document.cookie 來(lái)獲取當(dāng)前網(wǎng)站下的 cookie 時(shí)，得到的是字符串形式的值，該值包含了當(dāng)前網(wǎng)站下所有的 cookie。它會(huì)把所有的 cookie 通過(guò)一個(gè)分號(hào)+空格的形式串聯(lián)起來(lái)。
要獲取不同的 cookie 值，可以將這個(gè)包含了分號(hào)及空格的字符串使用 split() 方法按分號(hào)分隔轉(zhuǎn)換為一個(gè)字符串?dāng)?shù)組，然后再對(duì)這個(gè)字符串?dāng)?shù)組進(jìn)行遍歷即可得到每個(gè)名/值對(duì)，對(duì)這個(gè)名/值對(duì)再次使用 split() 方法按等號(hào)分隔轉(zhuǎn)換為一個(gè)包含名稱(chēng)和值的數(shù)組，就可以得到指定 cookie 名稱(chēng)的值了。
例如要獲取 cookie 名為 age 的值的代碼如下：
document.cookie = "username=abc; age=23"; var arr1 = document.cookie.split(';'); for(var i = 0; i < arr1.length; i++){ var arr2 = arr1[i].split('='); if(arr2[0] == 'age'){ alert(arr2[1]); } }
4. 設(shè)置cookie的有效時(shí)間
默認(rèn)情況下，cookie 是臨時(shí)存儲(chǔ)的，即默認(rèn)是存在內(nèi)存的，并沒(méi)有存儲(chǔ)到硬盤(pán)中，所以存儲(chǔ)的 cookie 在瀏覽器進(jìn)程關(guān)閉后會(huì)自動(dòng)銷(xiāo)毀。如果想把 cookie 在計(jì)算機(jī)中保存一段時(shí)間或永久保存，則需要在設(shè)置 cookie 時(shí)對(duì)其設(shè)置一個(gè)有效時(shí)間，設(shè)置格式如下：
document.cookie = "名稱(chēng)=值;expires="+字符串格式的時(shí)間;
例如：
var oDate = new Date(); oDate.setDate(oDate.getDate()+10);//訪問(wèn)頁(yè)面后的10天過(guò)期 //設(shè)置cookie的有效時(shí)間，時(shí)間為字符串格式 document.cookie = 'username=abc;expires='+oDate.toGMTString();
5. 刪除cookie
直接將 cookie 的有效時(shí)間設(shè)置成過(guò)去某個(gè)時(shí)間即可。例如：
var oDate = new Date(); oDate.setDate(oDate.getDate()-1);//訪問(wèn)頁(yè)面的前一天 document.cookie = 'username=abc;expires='+oDate.toGMTString();
【例 1】使用 document 操作 cookie。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>使用cookie記住登錄用戶(hù)名</title> <script> window.onload = function(){ var oUsername = document.getElementById('username'); var oLogin = document.getElementById('login'); var oDel = document.getElementById('del'); //判斷用戶(hù)是否曾經(jīng)登錄過(guò) if(getCookie('username')){ oUsername.value = getCookie('username'); } //定義一個(gè)函數(shù)來(lái)獲取指定名稱(chēng)的cookie值： function getCookie(key){ var arr1 = document.cookie.split(';'); for(var i = 0; i < arr1.length; i++){ var arr2 = arr1[i].split('='); if(arr2[0] == key){ return unescape(arr2[1]);//對(duì)編碼后的內(nèi)容進(jìn)行解碼 } } } //定義一個(gè)函數(shù)來(lái)設(shè)置cookie,同時(shí)設(shè)置cookie的有效時(shí)間 function setCookie(key,value,t){ var oDate = new Date(); oDate.setDate(oDate.getDate()+t); //使用escape()對(duì)內(nèi)容進(jìn)行編碼 document.cookie = key+'='+escape(value)+';expires='+oDate.toGMTString(); } //定義一個(gè)函數(shù)移除cookie function removeCookie(key){ setCookie(key,'',-1); } oLogin.onclick = function(){ alert('登錄成功'); //將輸入的用戶(hù)名存儲(chǔ)在cookie中，且在登錄5天后cookie過(guò)期 setCookie('username',oUsername.value,5); } oDel.onclick = function(){ removeCookie('username'); oUsername.value = '';//移除cookie后清空文本框內(nèi)容 } }; </script> </head> <body> <input type="text" id="username"/> <input type="button" value="登錄" id="login"/> <input type="button" value="刪除用戶(hù)名cookie" id="del"/> </body> </html>
注：Firefox 和 IE 在本地只允許臨時(shí)操作 cookie，關(guān)閉瀏覽器后無(wú)法獲取 cookie。而 Chrome 則不允許在本地操作 cookie。將例 1 發(fā)布到 Web 服務(wù)器上后再訪問(wèn)它時(shí)，這些瀏覽器都可以操作 cookie。
下圖所示是在 Chrome 瀏覽器中訪問(wèn)發(fā)布到 Tomcat Web 服務(wù)器上運(yùn)行后分別為輸入用戶(hù)名后單擊登錄按鈕和刪除按鈕的結(jié)果（Tomcat 服務(wù)器在本機(jī)，因而可以使用 localhost 作為域名來(lái)訪問(wèn)它）。
輸入用戶(hù)名后單擊登錄按鈕，在單擊刪除用戶(hù)名 cookie 按鈕前關(guān)掉 Chrome 瀏覽器進(jìn)程，然后再次打開(kāi) Chrome 訪問(wèn)例 1，可得到圖 3 所示的結(jié)果，即用戶(hù)名會(huì)自動(dòng)顯示在文本框中。如果單擊刪除用戶(hù)名 cookie 按鈕后關(guān)掉 Chrome 瀏覽器進(jìn)程，然后再次打開(kāi) Chrome 訪問(wèn)例 1，則得到圖 4 所示的結(jié)果，此時(shí)存儲(chǔ)在 cookie 中的用戶(hù)名已刪掉，因而無(wú)法顯示在文本框中。
【推薦學(xué)習(xí)：javascript高級(jí)教程】
