溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下javascript如何實(shí)現(xiàn)cookie操作，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
方法：1、用“document.cookie="名稱=值;"”語(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)用戶訪問(wèn)了某個(gè)網(wǎng)站時(shí)，就可以通過(guò) cookie 向訪問(wèn)者計(jì)算機(jī)上存儲(chǔ)數(shù)據(jù)。之后，當(dāng)用戶在同一臺(tái)計(jì)算機(jī)通過(guò)瀏覽器再次請(qǐng)求該頁(yè)面時(shí)，會(huì)發(fā)送這個(gè) cookie，因而可以使用 cookie 來(lái)識(shí)別用戶。
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 = "名稱1=值1[; 名稱2=值2; …]";
設(shè)置 cookie 的示例如下：
document.cookie = "username=abc"; document.cookie = "age=23"; document.cookie = "username=abc; age=23";
需要注意的是，在 cookie 的名稱或值中不能使用分號(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 中的值在用戶計(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è)包含名稱和值的數(shù)組，就可以得到指定 cookie 名稱的值了。
例如要獲取 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)銷毀。如果想把 cookie 在計(jì)算機(jī)中保存一段時(shí)間或永久保存，則需要在設(shè)置 cookie 時(shí)對(duì)其設(shè)置一個(gè)有效時(shí)間，設(shè)置格式如下：
document.cookie = "名稱=值;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記住登錄用戶名</title>
<script>
window.onload = function(){
var oUsername = document.getElementById('username');
var oLogin = document.getElementById('login');
var oDel = document.getElementById('del');
//判斷用戶是否曾經(jīng)登錄過(guò)
if(getCookie('username')){
oUsername.value = getCookie('username');
}
//定義一個(gè)函數(shù)來(lái)獲取指定名稱的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('登錄成功');
//將輸入的用戶名存儲(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="刪除用戶名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)行后分別為輸入用戶名后單擊登錄按鈕和刪除按鈕的結(jié)果（Tomcat 服務(wù)器在本機(jī)，因而可以使用 localhost 作為域名來(lái)訪問(wèn)它）。
輸入用戶名后單擊登錄按鈕，在單擊刪除用戶名 cookie 按鈕前關(guān)掉 Chrome 瀏覽器進(jìn)程，然后再次打開(kāi) Chrome 訪問(wèn)例 1，可得到圖 3 所示的結(jié)果，即用戶名會(huì)自動(dòng)顯示在文本框中。如果單擊刪除用戶名 cookie 按鈕后關(guān)掉 Chrome 瀏覽器進(jìn)程，然后再次打開(kāi) Chrome 訪問(wèn)例 1，則得到圖 4 所示的結(jié)果，此時(shí)存儲(chǔ)在 cookie 中的用戶名已刪掉，因而無(wú)法顯示在文本框中。
以上是“javascript如何實(shí)現(xiàn)cookie操作”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼