js中的cookie的讀寫操作範例詳解_javascript技巧

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

cookie是字串而且還是一個特定格式的文字字串

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

cookie的建立方式

設定cookie 我們一般都會封裝成一個函數：

複製程式碼

程式碼如下:

function addCookie(sName,sValue,day) {
var expireDate = new Date(); >expireDate.setDate(expireDate.getDate() day);;
//設定失效時間
document.cookie = escape(sName) '=' escape(sValue) ';expires=' expireDate.toGMTString() ;6 //escape()漢字轉成unicode編碼,toGMTString() 把日期物件轉成字串
}

讀取cookie


讀取cookie

加入了cookie之後，我們要如何來取得它呢，很簡單：

複製程式碼

程式碼如下:


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

return showAllCookie;
}
}

cookie有有效期限可自動刪除，也可以透過設定其失效日期來立即刪除一樣很簡單,繼續：

複製程式碼

程式碼如下:


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

}
}


我們已經知道如何建立、取得、刪除了，現在也該運用cookie了

下面我們用cookie做一個簡單的計時器： 複製代碼

程式碼如下:


var cookieCount = {};
cookieCount.count = function () {
var count = parseInt(this.getCount('myCount'));
count ;
document.cookie = 'myCount=' count '';
alert('第' count '訪問');
}
cookieCount.setCount= function () {
/ /先得建立一個名為myCount的cookie
var expireDate = new Date();
expireDate.setDate(expireDate.getDate() 1);
document.cookie = 'myCount=' '0' ';expires=' expireDate.toGMTString();
}
cookieCount.getCount = function (countName) {
//取得名為計數cookie,為其加1
var arrCookie = document. cookie.split('; ');
var arrLength = arrCookie.length;
var ini = true;
for(var i=0; iif(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的路徑

本文開頭的時候提到cookie的路徑設定cookie的路徑：path=URL;

如果在網域名稱的子目錄建立的cookie，網域及其他同級目錄或上級目錄是無法存取這個cookie的，而透過設定路徑的好處就是可以上網域名稱以及網域的子類目錄都可以存取到，如下：

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

cookie域

設定域：domain=siteDomain

這個主要用在同域的情況下共用一個cookie，例如"www.taobao .com" 與"ued.taobao.com" 兩者是共享一個域名"taobao.com"，我們如果想讓"www.taobao.com" 下的cookie被"ued.taobao.com" 訪問，那麼就需要把path屬性設為"/"，並且設定cookie 的domain-->document.cookie='cookieName=cookieValue;expires=expireDate;path=/;domain=taobao.com'。

隨著web的不斷發展項目中的需要，HTML5提供了兩個屬性window.sessionStorage和window.localStorage,並攜帶了setItem,getItem,removeItem,clear等方法，使得本地儲存資料的方法操作更為簡單方便