快捷導(dǎo)航

javascript封裝 Cookie 應(yīng)用接口

更新時(shí)間：2015年08月07日 11:02:55 投稿：hebedich

本文通過幾個(gè)簡(jiǎn)單的示例向大家展示了javascript封裝cookie的注意事項(xiàng)及操作方法，非常的簡(jiǎn)單實(shí)用，最后附上一則具體實(shí)例，有需要的小火把可以參考下。

本文章記錄本人在學(xué)習(xí) Cookie 中看書理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復(fù)習(xí)。

封裝函數(shù)

在默認(rèn)的情況下存取Cookie是一件比較麻煩的事情。由于Cookie是通過字符串來存儲(chǔ)信息的，所以容易導(dǎo)致在執(zhí)行賦值運(yùn)算的時(shí)需要轉(zhuǎn)換讀取信息的數(shù)據(jù)類型。而且Cookie信息的字符串本身就令人討厭，在經(jīng)常使用Cookie信息的 Web 應(yīng)用中格外的不方便。所以需要自行的封裝一個(gè)Cookie函數(shù)來提供開發(fā)效率！

定義一個(gè)函數(shù)Cookie()，這個(gè)函數(shù)能夠?qū)懭胫付ǖ腃ookie信息，刪除指定的Cookie信息，也能夠讀取指定名稱的Cookie值，另外，在該函數(shù)中還可以制定Cookie信息的有效期、有效路徑、作用域和安全性選項(xiàng)設(shè)置。完整的代碼：

var Cookie = function(name, value, options) {
    // 如果第二個(gè)參數(shù)存在
    if (typeof value != 'undefined') {
      options = options || {};
      if (value === null) {
        // 設(shè)置失效時(shí)間
        options.expires = -1;
      }
      var expires = '';
      // 如果存在事件參數(shù)項(xiàng)，并且類型為 number，或者具體的時(shí)間，那么分別設(shè)置事件
      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 : '', // 設(shè)置路徑
        domain = options.domain ? '; domain=' + options.domain : '', // 設(shè)置域 
        secure = options.secure ? '; secure' : ''; // 設(shè)置安全措施，為 true 則直接設(shè)置，否則為空

      // 把所有字符串信息都存入數(shù)組，然后調(diào)用 join() 方法轉(zhuǎn)換為字符串，并寫入 Cookie 信息
      document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); 
    } else { // 如果第二個(gè)參數(shù)不存在
      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信息：

// 簡(jiǎn)單寫入一條 Cookie 信息
cookie("user", "baidu");
// 寫入一條 Cookie 信息，并且設(shè)置更多選項(xiàng)
cookie("user", "baidu", {
  expires: 10, // 有效期為 10 天
  path: "/", // 整個(gè)站點(diǎn)有效
  domain: "www.baidu.com", // 有效域名
  secure: true // 加密數(shù)據(jù)傳輸
});

2.讀取Cookie信息：

cookie("user");

3.刪除Cookie信息：

cookie("user", null);

再給大家分享一個(gè)封裝好的代碼

//向cookie寫入數(shù)據(jù)
function writeCookie(name, value, days) {
 // 定義有效日期（cookie的有效時(shí)間）
 var expires = "";

 // 為有效日期賦值
 if (days) {
  var date = new Date();
	//設(shè)置有效期（當(dāng)前時(shí)間+時(shí)間段）
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));//時(shí)間段為毫秒數(shù) 
  expires = "; expires=" + date.toGMTString();
 }

 // 給cookie賦值 name, value和expiration date（有效期）
 document.cookie = name + "=" + value + expires + "; path=/";
}
//讀取cookie數(shù)據(jù)
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;
}
//清楚所有的cookie
function eraseCookie(name) {
 // 將時(shí)間設(shè)置成-1將清除存儲(chǔ)在cookie中的數(shù)據(jù)
 writeCookie(name, "", -1);
}

最后，如果文章有什么錯(cuò)誤和疑問的地方，請(qǐng)指出。與sf各位共勉！

您可能感興趣的文章: