快捷導(dǎo)航

js中的cookie的讀寫操作示例詳解

更新時(shí)間：2014年04月17日 15:36:24 作者：

cookie是有有效期的，cookie的默認(rèn)有效期是從cookie生成至瀏覽器關(guān)閉，也可以通過設(shè)置cookie的有效期來指定其失效日期；用戶也可以禁止cookie也可以手動刪除cookie

cookie是一小段信息，以鍵/值對的信息保存在計(jì)算機(jī)硬盤上的字符串， cookie存儲容量大概在4kb，不同的瀏覽器廠家對cookie大小的限制有微微的差異；cookie主要的本質(zhì)是“識別”，通過識別來做一些事情;cookie 也是無法從你的硬盤取得任何其它數(shù)據(jù)，傳送電腦病毒或者獲取你的電子郵件地址。cookie是有有效期的，cookie的默認(rèn)有效期是從cookie生成至瀏覽器關(guān)閉，也可以通過設(shè)置cookie的有效期來指定其失效日期；用戶也可以禁止cookie也可以手動刪除cookie。

cookie是字符串而且還是一個(gè)特定格式的文本字符串

格式：cookieName=cookieValue;expires=expiresDate;path=URLpath;domain=siteDomain//cookie名稱，失效日期，儲存URL,儲存域值；

cookie的創(chuàng)建方式

設(shè)置cookie我們一般都封裝成一個(gè)函數(shù)：

復(fù)制代碼代碼如下:

 
function addCookie(sName,sValue,day) { 
var expireDate = new Date(); 
expireDate.setDate(expireDate.getDate()+day);; 
//設(shè)置失效時(shí)間 
document.cookie = escape(sName) + '=' + escape(sValue) +';expires=' + expireDate.toGMTString();6 //escape()漢字轉(zhuǎn)成unicode編碼,toGMTString() 把日期對象轉(zhuǎn)成字符串 
} 

讀取cookie

添加了cookie之后，我們?nèi)绾蝸慝@取它呢，很簡單：

復(fù)制代碼代碼如下:

 
function getCookies() { 
var showAllCookie = ''; 
if(!document.cookie == ''){ 
var arrCookie = document.cookie.split('; '); 
//用spilt('; ')切割所有cookie保存在數(shù)組arrCookie中 
var arrLength = arrCookie.length; 
for(var i=0; i<arrLength; i++) { 
showAllCookie += 'c_name:' + unescape(arrCookie[i].split('=')[0]) + 'c_value:' + unescape(arrCookie[i].split('=')[1]) + '<br>' 9 } 
return showAllCookie; 
} 
} 

cookie有有效期可自動刪除，也可以通過設(shè)置其失效日期來立即刪除

一樣很簡單,繼續(xù)：

復(fù)制代碼代碼如下:

 
function removeCookie() { 
if(document.cookie != '' && confirm('你想清理所有cookie嗎？')) { 
var arrCookie = document.cookie.split('; '); 
var arrLength = arrCookie.length; 
var expireDate = new Date(); 
expireDate.setDate(expireDate.getDate()-1); 
for(var i=0; i<arrLength; i++) { 
var str = arrCookie[i].split('=')[0]; 
document.cookie = str+ '=' + ';expires=' + expireDate.toGMTString(); 
} 
} 
} 

我們已經(jīng)知道如何創(chuàng)建、獲取、刪除cookie了，現(xiàn)在也該運(yùn)用cookie了

下面我們用cookie做一個(gè)簡單的計(jì)時(shí)器：

復(fù)制代碼代碼如下:

 
var cookieCount = {}; 
cookieCount.count = function () { 
var count = parseInt(this.getCount('myCount')); 
count++; 
document.cookie = 'myCount=' + count + ''; 
alert('第'+count+'訪問'); 
} 
cookieCount.setCount= function () { 
//首先得創(chuàng)建一個(gè)名為myCount的cookie 
var expireDate = new Date(); 
expireDate.setDate(expireDate.getDate()+1); 
document.cookie = 'myCount=' + '0' +';expires=' + expireDate.toGMTString(); 
} 
cookieCount.getCount = function (countName) { 
//獲取名為計(jì)數(shù)cookie,為其加1 
var arrCookie = document.cookie.split('; '); 
var arrLength = arrCookie.length; 
var ini = true; 
for(var i=0; i<arrLength; i++) { 
if(countName == arrCookie[i].split('=')[0]){ 
return parseInt(arrCookie[i].split('=')[1]); 
break; 
}else{ 
ini = false; 
} 
} 
if(ini == false)this.setCount(); 
return 0; 
} 
cookieCount.count(); 

cookie的路徑

本文開頭的時(shí)候提到cookie的路徑設(shè)置 cookie的路徑：path=URL;

如果在域名的子目錄創(chuàng)建的cookie，域名及其他同級目錄或上級目錄是訪問不到這個(gè)cookie的，而通過設(shè)置路徑的好處就是可以上域名以及域名的子類目錄都可以訪問到，如下：

document.cookie='cookieName=cookieValue;expires=expireDate;path=/'。

cookie域

設(shè)置域：domain=siteDomain

這個(gè)主要用在同域的情況下共享一個(gè)cookie，例如 "www.taobao.com" 與 "ued.taobao.com" 兩者是共享一個(gè)域名"taobao.com"，我們?nèi)绻胱?"www.taobao.com" 下的cookie被 "ued.taobao.com" 訪問，那么就需要把path屬性設(shè)置為 "/"，并且設(shè)置 cookie 的domain-->document.cookie='cookieName=cookieValue;expires=expireDate;path=/;domain=taobao.com'。

隨著web的不斷發(fā)展項(xiàng)目中的需要，HTML5提供了兩個(gè)屬性window.sessionStorage和window.localStorage,并攜帶了setItem,getItem,removeItem,clear等方法，使得本地存儲數(shù)據(jù)的方法操作更為簡單便利

您可能感興趣的文章: