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

cookie是有有效期限的，cookie的預設有效期是從cookie產生至瀏覽器關閉，也可以透過設定cookie的有效期限來指定其失效日期；使用者也可以禁止cookie也可以手動刪除cookie

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
 

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

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

cookie有有效期限可自動刪除，也可以透過設定其失效日期來立即刪除 

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(&#39;=&#39;)[0]; 
document.cookie = str+ &#39;=&#39; + &#39;;expires=&#39; + 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; i<arrLength; i++) { 
if(countName == arrCookie[i].split(&#39;=&#39;)[0]){ 
return parseInt(arrCookie[i].split(&#39;=&#39;)[1]); 
break; 
}else{ 
ini = false; 
} 
} 
if(ini == false)this.setCount(); 
return 0; 
} 
cookieCount.count();

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

cookie的路徑

 

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

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

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

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等方法，使得本地儲存資料的方法操作更為簡單方便。

以上就是本章的全部內容，更多相關教學請訪問JavaScript影片教學！