JavaScript 캡슐화 쿠키 애플리케이션 인터페이스_javascript 기술

이 글은 제가 쿠키를 공부하면서 책을 읽으며 배운 내용 중 일부를 기록하고, 기억을 깊게 하며, 나중에 복습할 수 있도록 정리하고 기록합니다.

포장기능

쿠키에 접근하는 것은 기본적으로 번거로운 작업입니다. 쿠키는 문자열을 통해 정보를 저장하므로 할당 작업 수행 시 읽은 정보의 데이터 유형을 쉽게 변환할 수 있습니다. 더욱이, 쿠키 정보의 문자열 자체가 성가신데, 이는 쿠키 정보를 자주 사용하는 웹 애플리케이션에서 특히 불편합니다. 따라서 개발 효율성을 제공하려면 쿠키 기능을 직접 캡슐화해야 합니다!

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

2. 쿠키 정보 읽기:

cookie("user");

3. 쿠키 정보 삭제:

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

마지막으로 글에 오류나 궁금한 점이 있으면 지적해주세요. 모두 격려해 봅시다!