DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript數據存儲 Cookie篇
JavaScript數據存儲 Cookie篇
編輯:關於JavaScript     

1.什麼是cookie?
    答:cookie是用於在客戶端存儲會話信息的。
2.cookie的組成部分?
    ①名稱:一個唯一確定cookie 的名稱。建議區分大小寫。cookie 的名稱必須是經過URL 編碼的。
    ②值:儲存在cookie 中的字符串值。值必須被URL 編碼。
    ③域:cookie 對於哪個域是有效的。所有向該域發送的請求中都會包含這個cookie 信息。這個值可以包含子域(subdomain,如www.wrox.com),也可以不包含它(如.wrox.com,則對於wrox.com的所有子域都有效)。如果沒有明確設定,那麼這個域會被認作來自設置cookie 的那個域。
    ④路徑:對於指定域中的那個路徑,應該向服務器發送cookie。例如,你可以指定cookie 只有從http://www.wrox.com/books/ 中才能訪問,那麼http://www.wrox.com 的頁面就不會發送cookie 信息,即使請求都是來自同一個域的。
    ⑤失效時間:表示cookie 何時應該被刪除的時間戳。默認情況下,浏覽器會話結束時即將所有cookie 刪除;不過也可以自己設置刪除時間。這個值是個GMT 格式的日期(Wdy, DD-Mon-YYYY HH:MM:SS GMT),用於指定應該刪除cookie 的准確時間。因此,cookie
    可在浏覽器關閉後依然保存在用戶的機器上。如果你設置的失效日期是個以前的時間,則cookie 會被立刻刪除。
    ⑥安全標志:指定後,cookie 只有在使用SSL 連接的時候才發送到服務器。例如,cookie 信息只能發送給https://www.wrox.com,而http://www.wrox.com 的請求則不能發送cookie。
3.列舉一個cookie的例子?
    以下是一個完整的cookie的例子,我們將把它分解開來:
    Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com; path=/; secure
    ①名稱: name字符串表示
    ②值:value字符串表示
    ③過期時間:Mon, 22-Jan-07 07:10:24 GMT
    ④域名:.wrox.com
    ⑤路徑:當前目錄/
    ⑥安全標志:secure
4.如何操作cookie?
 

  var CookieUtil = {
    // 設置cookie
    set : function (name, value, expires, domain, path, secure) {
      var cookieText = "";
      cookieText += encodeURIComponent(name) + "=" + encodeURIComponent(value);
      if (expires instanceof Date) {
        cookieText += "; expires=" + expires.toGMTString();
      }
      if (path) {
        cookieText += "; path=" + path;
      }
      if (domain) {
        cookieText += "; domain=" + domain;
      }
      if (secure) {
        cookieText += "; secure";
      }
      document.cookie = cookieText;
    },
    // name=value; expires=expiration_time; path=domain_path; domain=domain_name; secure
    // 獲取cookie
    get : function (name) {
      var cookieName = encodeURIComponent(name) + "=",
        cookieStart = document.cookie.indexOf(cookieName),
        cookieValue = "";
      if (cookieStart > -1) {
        var cookieEnd = document.cookie.indexOf (";", cookieStart);
        if (cookieEnd == -1) {
          cookieEnd = document.cookie.length;
        }
        cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
      }
      return cookieValue; 
    },
    // 刪除cookie
    unset : function (name, domain, path, secure) {
      this.set(name, "", Date(0), domain, path, secure);
    }
  };
  // 測試
  CookieUtil.set("name", "zhang");
  var name = CookieUtil.get("name");
  alert(name);  // zhang
  CookieUtil.unset("name");
  alert(CookieUtil.get("name")); // 空

5.cookie的限制
    ①存儲數據數量有限
    ②保了儲存在cookie 中的信息只能讓批准的接受者訪問,而無法被其他域訪問
    ③安全性有限
6.針對cookie數據存儲少量的問題,我們提出了子cookie的概念。即在每條cookie的值中存儲多條數據,用"&"隔開。

  var SubCookieUtil = {
    /** 設置一條完整的cookie
    *  param name : 表示cookie的名稱,必填
    *  param subCookies : 表示cookie的值,為一個對象,必填
    *  param expires : 表示cookie的過期時間,可以不填
    *  param domain : 表示cookie的域名,可以不填
    *  param path : 表示cookie的路徑,可以不填
    *  param secure : 表示cookie的安全標志,可以不填
    *  eg : SubCookieUtil.setAll("info", { name : "zhang", age : 23});
    **/
    setAll : function (name, subCookies, expires, domain, path, secure) {
      var cookieText = "", subName, cookieParts = [];
      cookieText += encodeURIComponent(name) + "=";
      for(subName in subCookies) {
        cookieParts.push(encodeURIComponent(subName) + "=" + encodeURIComponent(subCookies[subName]));
      }
      if (cookieParts.length > 0) {
        cookieText += cookieParts.join("&");
        if (expires instanceof Date) {
          cookieText += "; expires=" + expires.toGMTString();
        }
        if (path) {
          cookieText += "; path=" + path;
        }
        if (domain) {
          cookieText += "; domain=" + domain;
        }
        if (secure) {
          cookieText += "; secure";
        }
      } else {
        cookieText += "; expires=" + Date(0).toGMTString();
      }
      document.cookie = cookieText;
    },
    /** 設置一條子cookie
    *  param name : 表示cookie的名稱,必填
    *  param subName : 表示子cookie的名稱,必填
    *  param value : 表示子cookie的值,必填
    *  param expires : 表示cookie的過期時間,可以不填
    *  param domain : 表示cookie的域名,可以不填
    *  param path : 表示cookie的路徑,可以不填
    *  param secure : 表示cookie的安全標志,可以不填
    *  eg : SubCookieUtil.set("info", "sex", "boy");
    **/
    set : function (name, subName, value, expires, domain, path, secure) {
      var cookies = this.getAll(name) || {};
      cookies[subName] = value;
      this.setAll(name, cookies, expires, domain, path, secure);
    },
    /** 讀取一條完整cookie
    *  param name : 表示cookie的名稱,必填
    *  return : 一個cookie對象
    *  eg : SubCookieUtil.getAll("info");
    **/
    getAll : function (name) {
      var cookieName = encodeURIComponent(name) + "=",
        cookieStart = document.cookie.indexOf(cookieName),
        cookieValue = "", i, len, subCookies, parts, result = {};
      if (cookieStart > -1) {
        var cookieEnd = document.cookie.indexOf (";", cookieStart);
        if (cookieEnd == -1) {
          cookieEnd = document.cookie.length;
        }
        cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
        if (cookieValue.length > 0) {
          subCookies = cookieValue.split("&");
          for (i = 0, len = subCookies.length; i < len; i++) {
            parts = subCookies[i].split("=");
            result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
          }
          return result;
        }
      }
      return null;
    },
    /** 獲取一條子cookie的值
    *  param name : 表示cookie的名稱,必填
    *  param subName : 表示子cookie的名稱
    *  return : 一個子cookie的值
    *  eg : SubCookieUtil.get("info", "name");
    **/
    get : function (name, subName) {
      var cookies = this.getAll(name);
      if (cookies) {
        return cookies[subName];
      } else {
        return null;
      }
    }, 
    /** 刪除一條完整cookie
    *  param name : 表示cookie的名稱,必填
    *  param domain : 表示cookie的域名,可以不填
    *  param path : 表示cookie的路徑,可以不填
    *  param secure : 表示cookie的安全標志,可以不填
    *  eg : SubCookieUtil.unsetAll("info");
    **/
    unsetAll : function (name, domain, path, secure) {
      this.setAll(name, "", Date(0).toGMTString(), domain, path, secure);
    },
    /** 刪除一條子cookie
    *  param name : 表示cookie的名稱,必填
    *  param subName : 表示子cookie的名稱,必填
    *  param domain : 表示cookie的域名,可以不填
    *  param path : 表示cookie的路徑,可以不填
    *  param secure : 表示cookie的安全標志,可以不填
    *  eg : SubCookieUtil.unset("info", "name");
    **/
    unset : function (name, subName, domain, path, secure) {
      var cookies = this.getAll(name);
      if (cookies) {
        delete cookies[subName];
        this.setAll(name, cookies, null, domain, path, secure);
      }
    }  
  };
  // 測試:
  var zhang = {
    name : "zhang",
    age : 23,
    height : "178cm",
    weight : "66kg"
  }
  // 設置一條完整的cookie
  SubCookieUtil.setAll("zhang", zhang);
  // 獲取一條完整的cookie
  var zhang = SubCookieUtil.getAll("zhang");
  alert(zhang.weight);  // 66kg
  // 再為張添加一個子cookie
  SubCookieUtil.set("zhang", "sport", "basketball");
  // 獲取子cookie
  alert(SubCookieUtil.get("zhang", "sport")); // basketball
  // 刪除一條子cookie
  SubCookieUtil.unset("zhang", "age");
  alert(SubCookieUtil.get("zhang", "age"));  // undefined
  // 刪除一條完整的cookie
  SubCookieUtil.unsetAll("zhang");
  alert(SubCookieUtil.getAll("zhang"));  // 報錯,因為已經被刪除

以上就是本文的全部內容,希望對大家的學習有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved