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"));  // 報錯，因為已經被刪除

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