Encapsulation JavaScript Application de cookies interface_javascript compétences

Cet article enregistre certaines des choses que j'ai apprises en lisant le livre tout en étudiant Cookie, approfondit ma mémoire, les organise et les enregistre pour une révision future.

Fonction d'emballage

L'accès aux cookies est une chose gênante par défaut. Étant donné que les cookies stockent les informations via des chaînes, il est facile de convertir le type de données des informations lues lors de l'exécution d'opérations d'affectation. De plus, la chaîne d'informations des cookies elle-même est ennuyeuse, ce qui est particulièrement gênant dans les applications Web qui utilisent souvent les informations des cookies. Par conséquent, vous devez encapsuler vous-même une fonction Cookie pour assurer l’efficacité du développement !

Définir une fonction Cookie(). Cette fonction peut écrire les informations de cookie spécifiées, supprimer les informations de cookie spécifiées et lire la valeur du cookie du nom spécifié. De plus, dans cette fonction, la période de validité des informations de cookie peut. doivent également être définis. Des chemins d'accès, des étendues et des paramètres d'options de sécurité valides. Code complet :

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

Comment utiliser

Écrire les informations sur les cookies :

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

2. Lire les informations sur les cookies :

cookie("user");

3. Supprimer les informations des cookies :

cookie("user", null);

Je partagerai avec vous un code packagé

//向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);
}

Enfin, s'il y a des erreurs ou des questions dans l'article, merci de les signaler. On vous encourage tous !