찾다

집  >  기사  >  웹 프론트엔드  >  자바스크립트를 사용하여 쿠키 인스턴스를 캡슐화하는 방법에 대한 자세한 설명

자바스크립트를 사용하여 쿠키 인스턴스를 캡슐화하는 방법에 대한 자세한 설명

伊谢尔伦
伊谢尔伦원래의
2017-07-22 13:59:141157검색

이전에는 쿠키를 사용할 때는 모두 document.cookie 형태로 운영되었으나 호환성은 좋았지만 번거로웠습니다. 저는 개인적으로 바퀴 만드는 걸 좋아해서 쿠키용 도구 클래스를 캡슐화했습니다. 예전부터 코드 작성을 좋아했지만, 텍스트 요약을 별로 좋아하지도 않고, 단편적인 내용을 작성하는 것도 좋아하지 않아서 바꿔야 할 것 같습니다.

Things

(1) 캡슐화 방법, 어떤 종류의 캡슐화입니까? 캡슐화 방법: 네이티브 js를 사용하여 도구에 캡슐화하여 어디서나 사용할 수 있습니다. document.cookie를 캡슐화하는 것이 가장 좋은 방법이며 모든 작업은 document.cookie를 기반으로 합니다.

캡슐화 방법: 객체의 형태로 존재할 수 있으며 getter & setter 메소드를 사용하여 구현할 수 있습니다.

(2) 어떤 메소드를 캡슐화할지

get(), set(name, value, opts), Remove(name),clear(), getCookies() 등. 개인적으로 너무 많은 메소드를 캡슐화하면 충분하다고 생각합니다. 쿠키를 사용하세요.

Action

(1) 쿠키의 본질은 HTTP 쿠키입니다. 클라이언트에 표시되는 개체는 document.cookie입니다. 자세한 내용은 아래 코드를 읽고 댓글을 달면 됩니다.

(2) 위 코드는 다음과 같습니다. : 코드는 직관적이어야 하며 프로젝트 코드와 함께 압축될 수 있어야 합니다. 아래의 오프닝 코멘트가 핵심이라고 생각합니다. 

/*
 * HTTP Cookie:存储会话信息
 * 名称和值传送时必须是经过RUL编码的
 * cookie绑定在指定的域名下，非本域无法共享cookie，但是可以是在主站共享cookie给子站
 * cookie有一些限制：比如IE6 & IE6- 限定在20个；IE7 50个；Opear 30个...所以一般会根据【必须】需求才设定cookie
 * cookie的名称不分大小写；同时建议将cookie URL编码；路径是区分cookie在不同情况下传递的好方式；带安全标志cookie
 *     在SSL情况下发送到服务器端，http则不会。建议针对cookie设置expires、domain、 path；每个cookie小于4KB
 * */
//对cookie的封装，采取getter、setter方式
(function(global){
    //获取cookie对象，以对象表示
    function getCookiesObj(){
        var cookies = {};
        if(document.cookie){
            var objs = document.cookie.split('; ');
            for(var i in objs){
                var index = objs[i].indexOf('='),
                    name = objs[i].substr(0, index),
                    value = objs[i].substr(index + 1, objs[i].length);    
                cookies[name] = value;
            }
        }
        return cookies;
    }
    //设置cookie
    function set(name, value, opts){
        //opts maxAge, path, domain, secure
        if(name && value){
            var cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
            //可选参数
            if(opts){
                if(opts.maxAge){
                    cookie += '; max-age=' + opts.maxAge; 
                }
                if(opts.path){
                    cookie += '; path=' + opts.path;
                }
                if(opts.domain){
                    cookie += '; domain=' + opts.domain;
                }
                if(opts.secure){
                    cookie += '; secure';
                }
            }
            document.cookie = cookie;
            return cookie;
        }else{
            return '';
        }
    }
    //获取cookie
    function get(name){
        return decodeURIComponent(getCookiesObj()[name]) || null;
    }
    //清除某个cookie
    function remove(name){
        if(getCookiesObj()[name]){
            document.cookie = name + '=; max-age=0';
        }
    }
    //清除所有cookie
    function clear(){
        var cookies = getCookiesObj();
        for(var key in cookies){
            document.cookie = key + '=; max-age=0';
        }
    }
    //获取所有cookies
    function getCookies(name){
        return getCookiesObj();
    }
    //解决冲突
    function noConflict(name){
        if(name && typeof name === 'string'){
            if(name && window['cookie']){
                window[name] = window['cookie'];
                delete window['cookie'];
                return window[name];
            }
        }else{
            return window['cookie'];
            delete window['cookie'];
        }
    }
    global['cookie'] = {
        'getCookies': getCookies,
        'set': set,
        'get': get,
        'remove': remove,
        'clear': clear,
        'noConflict': noConflict
    };
})(window);

(3) 예시

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>cookie example</title>
    </head>
    <body>
        <script type="text/javascript" src="cookie.js" ></script>
        <script type="text/javascript">
            console.log(&#39;----------cookie对象-------------&#39;);
            console.log(cookie);
            console.log(&#39;----------对象-------------&#39;);
            console.log(cookie.getCookies());
            console.log(&#39;----------设置cookie-------------&#39;);
            console.log(cookie.set(&#39;name&#39;, &#39;wlh&#39;));
            console.log(&#39;----------设置cookie 123-------------&#39;);
            console.log(cookie.set(&#39;name&#39;, &#39;wlh123&#39;));
            console.log(&#39;----------设置cookie age-------------&#39;);
            console.log(cookie.set(&#39;age&#39;, 20));
            console.log(&#39;----------获取cookie-------------&#39;);
            console.log(cookie.get(&#39;name&#39;));
            console.log(&#39;----------获取所有-------------&#39;);
            console.log(cookie.getCookies());
            console.log(&#39;----------清除age-------------&#39;);
            console.log(cookie.remove(&#39;age&#39;));
            console.log(&#39;----------获取所有-------------&#39;);
            console.log(cookie.getCookies());
            console.log(&#39;----------清除所有-------------&#39;);
            console.log(cookie.clear());
            console.log(&#39;----------获取所有-------------&#39;);
            console.log(cookie.getCookies());
            console.log(&#39;----------解决冲突-------------&#39;);
            var $Cookie = cookie.noConflict(true /*a new name of cookie*/);
            console.log($Cookie);
            console.log(&#39;----------使用新的命名-------------&#39;);
            console.log($Cookie.getCookies());
        </script>
    </body>
</html>

위 내용은 자바스크립트를 사용하여 쿠키 인스턴스를 캡슐화하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：자바스크립트에서 쿠키를 설정하는 방법 예시에 대한 자세한 설명다음 기사：자바스크립트에서 쿠키를 설정하는 방법 예시에 대한 자세한 설명

관련 기사

더보기