用Js操作HTTP的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有有效期限可自動刪除，也可以透過設定其失效日期來立即刪除

一樣很簡單,繼續：

複製程式碼如下:

function removeCookie() { if(document.cookie != &#39;&#39; && confirm(&#39;你想清理所有cookie吗？&#39;)) { var arrCookie = document.cookie.split(&#39;; &#39;); 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了

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

#複製程式碼如下:

var cookieCount = {}; cookieCount.count = function () { var count = parseInt(this.getCount(&#39;myCount&#39;)); count++; document.cookie = &#39;myCount=&#39; + count + &#39;&#39;; alert(&#39;第&#39;+count+&#39;访问&#39;); } cookieCount.setCount= function () { //首先得创建一个名为myCount的cookie var expireDate = new Date(); expireDate.setDate(expireDate.getDate()+1); document.cookie = &#39;myCount=&#39; + &#39;0&#39; +&#39;;expires=&#39; + expireDate.toGMTString(); } cookieCount.getCount = function (countName) { //获取名为计数cookie,为其加1 var arrCookie = document.cookie.split(&#39;; &#39;); 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的路徑：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等方法，使得本地存儲資料的方法操作更為簡單便利

我相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

網頁製作中margin-top的實例教學

CSS裡的盒子模型的種類區別

CSS3的content屬性實作步驟

#

以上是用Js操作HTTP的Cookie的實作步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章！