Javascript Cookies增改刪

來源:互聯網
上載者:User

Cookies基礎認識
使用 Cookies
  我們已經知道,在 document 對象中有一個 cookie 屬性。但是 Cookie 又是什嗎?“某些 Web 網站在您的硬碟上用很小的文字檔儲存了一些資訊,這些檔案就稱為 Cookie。”—— MSIE 協助。一般來說,Cookies 是 CGI 或類似,比 HTML 進階的檔案、程式等建立的,但是 JavaScript 也提供了對 Cookies 的很全面的訪問權利。

  在繼續之前,我們先要學一學 Cookie 的基本知識。

  每個 Cookie 都是這樣的:<cookie名>=<值>

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

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

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

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

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

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

這意味著,文檔包含 3 個 Cookies:name, email 和 lastvisited,它們的值分別是 kevin, kevin@kevin.com 和 index.html。可以看到,兩個 Cookies 之間是用分號和空格隔開的,於是我們可以用 cookieString.split('; ') 方法得到每個 Cookie 分開的一個數組(先用 var cookieString = document.cookie)。

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

document.cookie = 'cookieName=' + escape('cookieValue')
     + ';expires=' + expirationDateObj.toGMTString();

  首先 escape() 方法:為什麼一定要用?因為 Cookie 的值的要求是“只能用可以用在 URL 編碼中的字元”。我們知道“escape()”方法是把字串按 URL 編碼方法來編碼的,那我們只需要用一個“escape()”方法來處理輸出到 Cookie 的值,用“unescape()”來處理從 Cookie 接收過來的值就萬無一失了。而且這兩個方法的最常用途就是處理 Cookies。其實設定一個 Cookie 只是“document.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 毫秒 */
  document.cookie = 'name=rose;expires=' + expires.toGMTString();

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

  再來一次:編寫一個函數,作用是尋找指定 Cookie 的值。

function getCookie(cookieName) {
  var cookieString = document.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));
}

刪除Cookie

var expires = new Date();
expires.setTime(expires.getTime() - 1);
document.cookie = 'name=rose;expires=' + expires.toGMTString();

可以看到,只需要把失效日期改成比現在日期早一點(這裡是早 1 毫秒),再用同樣的方法設定 Cookie,就可以刪掉 Cookie 了。

一個比較全的的cookie的設定name=value;expires=Fri,31 Dec 1999 23:59:59 GMT;path=/bookshop;domain=it315.org;secure;--------------------------------------------------------------------------------------------------------------------------------------------------------------------------cookies增、改、刪--------------------------------------------------------------<script language=javascript>//寫cookies函數 function setCookieAndExpires(name,value,expiresValue)//三個參數,一個是cookie的名子,一個是值{    var Days = expiresValue;     var exp  = new Date();    //new Date("December 31, 9998");    exp.setTime(exp.getTime() + Days*24*60*60*1000);    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();}function setCookie(name,value)//兩個參數,一個是cookie的名子,一個是值{    var Days = 30; //此 cookie 將被儲存 30 天    var exp  = new Date();    //new Date("December 31, 9998");    exp.setTime(exp.getTime() + Days*24*60*60*1000);    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();}function getCookie(name)//取cookies函數        {    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));     if(arr != null) return unescape(arr[2]); return null;}function delCookie(name)//刪除cookie{    var exp = new Date();    exp.setTime(exp.getTime() - 1);    var cval=getCookie(name);    if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();}</script><p><input type="button" value="按鈕" name="B3" onclick="SetCookie('xiaoqi','3')"></p><p><input type="button" value="按鈕" name="B2" onclick="alert(getCookie('xiaoqi'))"></p>

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.