javascript怎麼實作cookie的操作
- 青灯夜游原創
- 2021-09-15 18:36:3116936瀏覽
方法：1.用「document.cookie="名稱=值;"」語句來設定cookie或修改cookie值；2、用「document.cookie」語句取得cookie值；3、透過將有效時間「expires」設定為過期值來刪除cookie。
本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。
cookie 是儲存於訪客的電腦中的變量，當使用者造訪了某個網站時，就可以透過 cookie 儲存資料到訪客電腦上。之後，當使用者在同一台電腦透過瀏覽器再次要求該頁面時，會傳送這個 cookie，因而可以使用 cookie 來識別使用者。
1. 設定cookie
使用 cookie 來儲存資料是透過設定 cookie 來實現的。每個 cookie 都是一個名/值對，名/值對用等號連接，並將該名/值對賦值給 document.cookie 即可。一次可以將多個名/值對賦給 document.cookie，並使用分號加空格隔開每個名/值對。
設定cookie 的基本格式如下：
document.cookie = "名称1=值1[; 名称2=值2; …]";
設定cookie 的範例如下：
document.cookie = "username=abc"; document.cookie = "age=23"; document.cookie = "username=abc; age=23";
需要注意的是，在cookie 的名稱或值中不能使用分號；和等號=等符號。如果想存入這些符號，則需要使用 escape() 函數進行編碼。例如：document.cookie="str=" escape("username=nch")，程式碼等效於：document.cookie="str=username=nch"，即等號編碼為=。使用 escape() 編碼後，在取出值以後需要使用 unescape() 進行解碼才能得到原來的 cookie 值。
另外，使用上述格式設定的cookie 中的值在使用者電腦中儲存時，是以網站網域形式來區分不同網站的數據，而且不同瀏覽器存放cookie 的位置不一樣，因此不同瀏覽器之間儲存的cookie 不可以相互存取。另外，同一個網域下存放的 cookie 的數量是有限制的，不同的瀏覽器對存放的數量限制不一樣。而且，每個 cookie 存放的內容大小也是有限制的，不同的瀏覽器該大小限制也不一樣。
2. 修改cookie值
如果要改變一個cookie 值，只要對它重新賦值，例如：document.cookie="age=36 ";這樣就可以修改前面設定的age=23 的cookie 值。
3. 取得cookie
透過document.cookie 來取得目前網站下的cookie 時，得到的是字串形式的值，該值包含了目前網站下所有的cookie。它會把所有的 cookie 通過一個分號 空格的形式串聯起來。
要取得不同的cookie 值，可以將這個包含了分號及空格的字串使用split() 方法以分號分隔轉換為一個字串數組，然後再對這個字串數組進行遍歷即可是得到每個名/值對，對這個名/值對再次使用split() 方法以等號分隔轉換為一個包含名稱和值的數組，就可以得到指定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. 設定cookie的有效時間
預設情況下，cookie是暫時儲存的，即預設是存在記憶體的，並沒有儲存到硬碟中，所以儲存的cookie 在瀏覽器進程關閉後會自動銷毀。如果想把cookie 在電腦中保存一段時間或永久儲存，則需要在設定cookie 時對其設定一個有效時間，設定格式如下：
document.cookie = "名称=值;expires="+字符串格式的时间;
例如：
var oDate = new Date(); oDate.setDate(oDate.getDate()+10);//访问页面后的10天过期 //设置cookie的有效时间，时间为字符串格式 document.cookie = 'username=abc;expires='+oDate.toGMTString();
5. 刪除cookie
#直接將cookie 的有效時間設定成過去某個時間即可。例如：
var oDate = new Date(); oDate.setDate(oDate.getDate()-1);//访问页面的前一天 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');
//判断用户是否曾经登录过
if(getCookie('username')){
oUsername.value = getCookie('username');
}
//定义一个函数来获取指定名称的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]);//对编码后的内容进行解码
}
}
}
//定义一个函数来设置cookie,同时设置cookie的有效时间
function setCookie(key,value,t){
var oDate = new Date();
oDate.setDate(oDate.getDate()+t);
//使用escape()对内容进行编码
document.cookie = key+'='+escape(value)+';expires='+oDate.toGMTString();
}
//定义一个函数移除cookie
function removeCookie(key){
setCookie(key,'',-1);
}
oLogin.onclick = function(){
alert('登录成功');
//将输入的用户名存储在cookie中，且在登录5天后cookie过期
setCookie('username',oUsername.value,5);
}
oDel.onclick = function(){
removeCookie('username');
oUsername.value = '';//移除cookie后清空文本框内容
}
};
</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 在本機只允許暫時操作 cookie，關閉瀏覽器後無法取得 cookie。而 Chrome 則不允許在本機操作 cookie。將例 1 發佈到 Web 伺服器上後再造訪它時，這些瀏覽器都可以操作 cookie。
下圖所示是在Chrome 瀏覽器中存取發佈到Tomcat Web 伺服器上執行後分別為輸入使用者名稱後點選登入按鈕和刪除按鈕的結果（Tomcat 伺服器在本機，因而可以使用localhost 作為網域來存取它）。
輸入使用者名稱後點選登入按鈕，並在點選刪除使用者名稱cookie 按鈕前關掉Chrome 瀏覽器進程，然後再次開啟Chrome 存取例1，可得到圖3 所示的結果，即使用者名稱會自動顯示在文字方塊中。若點選刪除使用者名稱cookie 按鈕後關掉Chrome 瀏覽器進程，然後再次開啟Chrome 存取範例1，則得到圖4 所示的結果，此時儲存在cookie 中的使用者名稱已刪掉，因而無法顯示在文字方塊中。
【推薦學習：javascript進階教學】
以上是javascript怎麼實作cookie的操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！