JavaScript中的document.cookie的使用

  我們已經知道，在 document 物件中有一個 cookie 屬性。但 Cookie 又是什麼？ 「某些 Web 網站在您的硬碟上用很小的文字檔案儲存了一些訊息，這些檔案就稱為 Cookie。」— MSIE 說明。一般來說，Cookies 是 CGI 或類似，比 HTML 高級的文件、程式等創建的，但是 javascript 也提供了對 Cookies 的很​​全面的存取權利。

    我們要先學習 Cookie 的基本知識。

    每個Cookie 都是這樣的：=

的限制與javascript 的命名限制大同小異，少了“不能用javascript 關鍵字”，多了“只能用可以用可以用在URL 編碼中的字元」。後者比較難懂，但是只要你只用字母和數字命名，就完全沒有問題了。 的要求也是「只能用可以用在 URL 編碼中的字元」。

    每個 Cookie 都有失效日期，一旦電腦的時鐘過了失效日期，這個 Cookie 就會被刪除。我們不能直接刪除一個 Cookie，但可以用設定失效日期早於現在時刻的方法來間接刪除它。

　　每個網頁，或者說每個站點，都有它自己的Cookies，這些Cookies 只能由這個站點下的網頁來訪問，來自其他站點或同一站點下未經授權的區域的網頁，是不能訪問的。每一「組」Cookies 有規定的總大小（約 2KB 每「組」），一超過最大總大小，則最早失效的 Cookie 先被刪除，來讓新的 Cookie「安家」。

    現在我們來學習使用 documents.cookie 屬性。

    如果直接使用documents.cookie 屬性，或者說，用某種方法，例如給變數賦值，來獲得documents.cookie 的值，我們就可以知道在現在的文檔中有多少個Cookies，每個Cookies 的名字，和它的值。例如，在某文件中加入“document.write(documents.cookie)”，結果顯示：

    name=kevin; email=kevin@kevin.com; lastvisited=index.html

 Cookies：name, email 和lastvisited，它們的數值分別是kevin, kevin@kevin.com 和index.html。可以看到，兩個Cookies 之間是用分號和空格隔開的，所以我們可以用cookieString.split('; ') 方法得到每個Cookie 分開的一個陣列（先用var cookieString = documents.cookie） 。

    設定一個 Cookie 的方法是對 documents.cookie 賦值。與其它情況下的賦值不同，向 documents.cookie 賦值不會刪除掉原有的 Cookies，只會增添 Cookies 或更改原有 Cookie。賦值的格式：

    documents.cookie = 'cookieName=' + escape('cookievalue') + ';expires=' + expirationDateObj.toGMTString();

   cookieName 表示 Cookie 的名稱，cookievalue 表示 Cookie 的值，expirationDateObj 表示儲存失效日期的日期物件名，如果不需要指定失效日期，則不需要第二行。不指定失效日期，則瀏覽器預設是在關閉瀏覽器（也就是關閉所有視窗）之後過期。

    首先 escape() 方法：為什麼一定要用？因為 Cookie 的值的要求是「只能用可以用在 URL 編碼中的字元」。我們知道「escape()」方法是把字串按URL 編碼方法來編碼的，那我們只需要用一個「escape()」方法來處理輸出到Cookie 的值，用「unescape()」來處理從Cookie接收過來的數值就萬無一失了。而這兩種方法最常的用途就是處理 Cookies。其實設定一個 Cookie 只是「documents.cookie = 'cookieName=cookievalue'」這麼簡單，但為了避免在 cookievalue 中出現 URL 不准出現的字符，還是用一個 escape() 好。

    然後「expires」前面的分號：注意到就行了。是分號而不是其他。

   
    最後 toGMTString() 方法：設定 Cookie 的時效日期都是用 GMT 格式的時間的，其它格式的時間是沒有作用的。

    現在我們來實戰一下。設定一個「name=rose」的 Cookie，在 3 個月後過期。

var expires = new Date();

expires.setTime(expires.getTime() + 3 * 30 * 24 * 60 * 60 * 1000);
/* 三個月x 一個月當作30 天x 一天24小時
x 一小時60 分x 一分60 秒x 一秒1000 毫秒*/
documents.cookie = 'name=rose;expires=' + expires.toGMTString();

    為什麼沒有用escape() 方法？這是因為我們知道 rose 是一個合法的 URL 編碼字串，也就是說，'rose' == escape('rose')。一般來說，如果設定 Cookie 時不用 escape()，那麼取得 Cookie 時也不用 unescape()。

　　再來一次：寫一個函數，作用是找出指定 Cookie 的值。

function getCookie(cookieName) {
var cookieString = documents.cookie;
var start = cookieString.indexOf(cookieName + '=');
// 加上等號的原因是避免在某些Cookie 的值裡有
// 與cookieName 一樣的字串。
if (start == -1) // 找不到
return null;
start += cookieName.length + 1;
var end = cookieString.indexOf(';', start);
if (end == - 1) return unescape(cookieString.substring(start));
return unescape(cookieString.substring(start, end));
}

    這個函數用到了字串物件的一些方法，如果你不記得了（你是不是這般沒記性啊），請快去查查。這個函數所有的 if 語句都沒有帶 else，這是因為如果條件成立，程式運行的都是 return 語句，在函數裡碰上 return，就會終止運行，所以不加 else 也沒問題。函數在找到 Cookie 時，就會傳回 Cookie 的值，否則傳回「null」。

    現在我們要刪除剛才設定的 name=rose Cookie。

var expires = new Date();
expires.setTime(expires.getTime() - 1);
documents.cookie = 'name=rose;expires=' + expires.toGMTString();🠎🠎只要將失效日期改成比現在日期早一點（這裡是早1 毫秒），再用同樣的方法設定Cookie，就可以刪除Cookie 了。

    附一個老外寫的js操作cookie的函數

 

///設定cookie

function setCookie(NameOfCookie, value, expire, g的cookie:
//cookie的名稱,儲存的Cookie值,
// 以及Cookie過期的時間.
// 這幾行是把天數轉換為合法的日期

var ExpireDate = new Date ();

ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));

// 下這行是用來儲存cookie的,只需簡單的為"document.cookie"賦值即可
// 注意日期透過toGMTstring()函數被轉換成了GMT時間。

document.cookie = NameOfCookie + "=" + escape(value) +

  ((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString());

}
/取得cookie值
function getCookie(NameOfCookie)
{

// 首先我們檢查下cookie是否存在.
// 若不存在則document.cookie的長度為0
if (document.cookie.length > 0)
{

// 接著我們檢查下cookie的名字是否存在於document.cookie
// 因為不只一個cookie值儲存,所以即使document.cookie的長度不為0也不能保證我們想要的名字的cookie存在
//所以我們需要這一步驟看看是否有我們想要的cookie
//如果begin的變數值得到的是-1那麼說明不存在
begin = document.cookie.indexOf(NameOfCookie+"=");
if (begin != -1)  
{
// 說明存在我們的cookie.
begin += NameOfCookie.length+1;//cookie值的初始位置
end = document.cookie.indexOf("", begin);", begin) ;//結束位置
if (end == -1) end = document.cookie.length;//沒有;則end為字串結束位置
return unescape(document.cookie.substring(begin, end)); }
}
 
return null;

// cookie不存在返回null
}

 
///刪除cookie
function delCookie (NameOfCookie)
{
/認為過期時間調到過去的時間;
//剩下就交給操作系統適當時間清理cookie啦

 

if (getCookie(NameOfCookie)) {www.2cto.com
document.cookie = NameOfCookie + "=" +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}