JavaScript encapsulation Cookie application interface_javascript skills

This article records some of the things I learned from reading the book while studying Cookie, deepens my memory and organizes and records them for future review.

Packaging function

Accessing cookies is a troublesome thing by default. Since cookies store information through strings, it is easy to convert the data type of the read information when performing assignment operations. Moreover, the string of cookie information itself is annoying, which is particularly inconvenient in web applications that often use cookie information. Therefore, you need to encapsulate a Cookie function yourself to provide development efficiency!

Define a function Cookie(). This function can write the specified Cookie information, delete the specified Cookie information, and read the Cookie value of the specified name. In addition, in this function, the validity period of the Cookie information can also be set. Valid paths, scopes, and security option settings. Complete code:

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;
    }
  };

How to use

Write cookie information:

// 简单写入一条 Cookie 信息
cookie("user", "baidu");
// 写入一条 Cookie 信息，并且设置更多选项
cookie("user", "baidu", {
  expires: 10, // 有效期为 10 天
  path: "/", // 整个站点有效
  domain: "www.baidu.com", // 有效域名
  secure: true // 加密数据传输
});

2. Read cookie information:

cookie("user");

3. Delete cookie information:

cookie("user", null);

I will share with you a packaged code

//向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;
}
//清楚所有的cookie
function eraseCookie(name) {
 // 将时间设置成-1将清除存储在cookie中的数据
 writeCookie(name, "", -1);
}

Finally, if there are any errors or questions in the article, please point them out. Let’s encourage you all!