Ausführliche Erklärung zur Verwendung von Javascript zum Kapseln von Cookie-Instanzen-js-Tutorial-php.cn

Ausführliche Erklärung zur Verwendung von Javascript zum Kapseln von Cookie-Instanzen

伊谢尔伦

Freigeben： 2017-07-22 13:59:14

Original

1171 Leute haben es durchsucht

Bei der vorherigen Verwendung von Cookies wurden sie alle in der Form document.cookie betrieben. Obwohl die Kompatibilität gut ist, ist sie problematisch. Da ich persönlich gerne Räder herstelle, habe ich eine Werkzeugklasse für Kekse gekapselt. Ich habe schon lange gerne Code geschrieben, aber ich mag weder Textzusammenfassungen noch schreibe ich fragmentarische Dinge. Es scheint, dass ich ihn ändern muss.

Ideen

(1) Wie man kapselt, welche Art von Kapselung

Wie man kapselt: Verwenden Sie natives js, um es in ein Tool zu kapseln, damit es Überall einsetzbar. Die Kapselung von document.cookie ist der beste Weg, und alle Vorgänge basieren auf document.cookie.

So kapseln Sie es: Es kann in Form eines Objekts vorliegen und mithilfe von Getter- und Setter-Methoden implementiert werden.

(2) Welche Methoden sind gekapselt?

get(), set(name, value, opts), remove(name), clear(), getCookies() usw. Persönlich, Ich bin der Meinung, dass die Kapselung so ist. Es gibt viele Möglichkeiten, Cookies zu verwenden.

Aktion

(1) Cookies verstehen Das auf dem Client angezeigte Objekt ist document.cookie Kommentare

(2) Code oben: Diese Codes sollten sehr intuitiv sein und können zusammen mit dem Projektcode komprimiert werden. Ich denke, der einleitende Kommentar unten ist der entscheidende Punkt.

/*
 * 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(&#39;; &#39;);
            for(var i in objs){
                var index = objs[i].indexOf(&#39;=&#39;),
                    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) + &#39;=&#39; + encodeURIComponent(value);
            //可选参数
            if(opts){
                if(opts.maxAge){
                    cookie += &#39;; max-age=&#39; + opts.maxAge; 
                }
                if(opts.path){
                    cookie += &#39;; path=&#39; + opts.path;
                }
                if(opts.domain){
                    cookie += &#39;; domain=&#39; + opts.domain;
                }
                if(opts.secure){
                    cookie += &#39;; secure&#39;;
                }
            }
            document.cookie = cookie;
            return cookie;
        }else{
            return &#39;&#39;;
        }
    }
    //获取cookie
    function get(name){
        return decodeURIComponent(getCookiesObj()[name]) || null;
    }
    //清除某个cookie
    function remove(name){
        if(getCookiesObj()[name]){
            document.cookie = name + &#39;=; max-age=0&#39;;
        }
    }
    //清除所有cookie
    function clear(){
        var cookies = getCookiesObj();
        for(var key in cookies){
            document.cookie = key + &#39;=; max-age=0&#39;;
        }
    }
    //获取所有cookies
    function getCookies(name){
        return getCookiesObj();
    }
    //解决冲突
    function noConflict(name){
        if(name && typeof name === &#39;string&#39;){
            if(name && window[&#39;cookie&#39;]){
                window[name] = window[&#39;cookie&#39;];
                delete window[&#39;cookie&#39;];
                return window[name];
            }
        }else{
            return window[&#39;cookie&#39;];
            delete window[&#39;cookie&#39;];
        }
    }
    global[&#39;cookie&#39;] = {
        &#39;getCookies&#39;: getCookies,
        &#39;set&#39;: set,
        &#39;get&#39;: get,
        &#39;remove&#39;: remove,
        &#39;clear&#39;: clear,
        &#39;noConflict&#39;: noConflict
    };
})(window);

Nach dem Login kopieren

(3) Beispiel

<!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung von Javascript zum Kapseln von Cookie-Instanzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!