javascript封裝 Cookie 應用介面，javascriptcookie

javascript封裝 Cookie 應用介面，javascriptcookie

本文章記錄本人在學習 Cookie 中看書理解到的一些東西，加深記憶和並且整理記錄下來，方便之後的複習。

封裝函數

在預設的情況下存取Cookie是一件比較麻煩的事情。由於Cookie是通過字串來儲存資訊的，所以容易導致在執行賦值運算的時需要轉換讀取資訊的資料類型。而且Cookie資訊的字串本身就令人討厭，在經常使用Cookie資訊的 Web 應用程式中格外的不方便。所以需要自行的封裝一個Cookie函數來提供開發效率！

定義一個函數Cookie()，這個函數能夠寫入指定的Cookie資訊，刪除指定的Cookie資訊，也能夠讀取指定名稱的Cookie值，另外，在該函數中還可以制定Cookie資訊的有效期間、有效路徑、範圍和安全性選項設定。完整的代碼：

var Cookie = function(name, value, options) {    // 如果第二個參數存在    if (typeof value != 'undefined') {      options = options || {};      if (value === null) {        // 設定失效時間        options.expires = -1;      }      var expires = '';      // 如果存在事件參數項，並且類型為 number，或者具體的時間，那麼分別設定事件      if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {        var date;        if (typeof options.expires == 'number') {          date = new Date();          date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));        } else {          date = options.expires;        }        expires = '; expires=' + date.toUTCString();      }      var path = options.path ? '; path=' + options.path : '', // 設定路徑        domain = options.domain ? '; domain=' + options.domain : '', // 設定域         secure = options.secure ? '; secure' : ''; // 設定安全措施，為 true 則直接設定，否則為空白      // 把所有字串資訊都存入數組，然後調用 join() 方法轉換為字串，並寫入 Cookie 資訊      document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');     } else { // 如果第二個參數不存在      var CookieValue = null;      if (document.cookie && document.cookie != '') {        var Cookie = document.cookie.split(';');        for (var i = 0; i < Cookies.length; i++) {          var Cookie = (Cookie[i] || "").replace( /^\s+|\s+$/g, "");          if (Cookie.substring(0, name.length + 1) == (name + '=')) {            CookieValue = decodeURIComponent(Cookie.substring(name.length + 1));            break;          }        }      }      return CookieValue;    }  };

如何使用

寫入Cookie資訊：

// 簡單寫入一條 Cookie 資訊cookie("user", "baidu");// 寫入一條 Cookie 資訊，並且設定更多選項cookie("user", "baidu", {  expires: 10, // 有效期間為 10 天  path: "/", // 整個網站有效  domain: "www.baidu.com", // 有效網域名稱  secure: true // 加密資料傳輸});

2.讀取Cookie資訊：

cookie("user");

3.刪除Cookie資訊：

cookie("user", null);

再給大家分享一個封裝好的代碼

//向cookie寫入資料function writeCookie(name, value, days) { // 定義有效日期（cookie的有效時間） var expires = ""; // 為有效日期賦值 if (days) {  var date = new Date();//設定有效期間（目前時間+時間段）  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));//時間段為毫秒數   expires = "; expires=" + date.toGMTString(); } // 給cookie賦值 name, value和expiration date（有效期間） document.cookie = name + "=" + value + expires + "; path=/";}//讀取cookie資料function readCookie(name) { var searchName = name + "="; var cookies = document.cookie.split(';'); for(var i=0; i < cookies.length; i++) {  var c = cookies[i];  while (c.charAt(0) == ' ')   c = c.substring(1, c.length);  if (c.indexOf(searchName) == 0)   return c.substring(searchName.length, c.length); } return null;}//清楚所有的cookiefunction eraseCookie(name) { // 將時間設定成-1將清除儲存在cookie中的資料 writeCookie(name, "", -1);}

最後，如果文章有什麼錯誤和疑問的地方，請指出。與sf各位共勉！