js数据存储1:cookie操作总结

        本文总结的是cookie的常见操作以及封装操作的方法,cookie原理,作用,和session的关系等等不予讨论,可以查看其它文章。
        cookie由以下几块组成:①名称:必需值;②值:必需值;③域domain:可选,如不填写,默认为设置cookie的域名;④路径path:可选,如不填写,默认为设置cookie的路径;⑤失效时间expires:可选,默认会话结束将cookie删除;⑥安全标志secure:可选,如果指定,则只能是SSL连接的时候才发送到服务器。
        cookie的限制:IE6 以及更低版本限制每个域名最多 20 个 cookie,IE7 和之后版本最多 50 个,Firefox 限制每个域最多 50 个 cookie, Opera 限制每个域最多 30 个 cookie,Safari 和 Chrome 对于每个域的 cookie 数量限制没有硬性规定,当超过单个域名限制之后还要再设置 cookie,浏览器就会清除以前设置的 cookie。而浏览器中对于 cookie 的尺寸限制是4096B(写的时候肯定要比这个容量低)。
        window.navigator.cookieEnabled:表示浏览器是否打开 Cookie 功能。
        HttpOnly属性:如果服务器加上了HttpOnly属性,则这个Cookie无法被JavaScript读取(即document.cookie不会返回这个Cookie的值),只用于向服务器发送。

原始的Cookie操作
    document.cookie = "myCookie=myValue";
    document.cookie = "cookie1=value1";
    //返回当前页面可用的cookie由分号隔开的key和value名值对:name1=value1;name2=value2;name3=value3
    console.log(document.cookie);
    //而且需要对名称和值进行编码(因为名称和值中不允许出现分号,逗号和空格)
    document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("jay") + ";domain=baidu.com;path=/";
    //一般设置cookie都是重新设置一个cookie,除非设置的时候,cookie名称,domain,path,secure这几个都一致,
    //如果想删除cookie就是这种做法.
封装Cookie常用操作
//封装常用cookie操作
    var CookieUtil = {
        get:function (name) {
            var cookieName = encodeURIComponent(name) + '=',cookieValue = null,
                cookieStart = document.cookie.indexOf(cookieName);
            if(cookieStart > -1){
                var cookieEnd = document.cookie.indexOf(';',cookieStart);
                if(cookieEnd == -1){
                    cookieEnd = document.cookie.length;
                }
                cookieValue = decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd));
            }
            return cookieValue;
        },
        set:function (name, value,expires, path, domain,secure) {
            var cookieText = encodeURIComponent(name) + "=" +
                    encodeURIComponent(value);
            if (expires instanceof Date) {
                cookieText += "; expires=" + expires.toGMTString();
            }
            if (path) {
                cookieText += "; path=" + path;
            }
            if (domain) {
                cookieText += "; domain=" + domain;
            }
            if (secure) {
                cookieText += "; secure";
            }
            document.cookie = cookieText;
        },
        unset: function (name, path, domain, secure){
            this.set(name, "", new Date(0), path, domain, secure);
        }
    };
封装子Cookie操作

为了绕开浏览器对域名下的cookie数量的限制,可以使用子cookie的方式,同时要注意的是不能超过单个cookie的长度限制。

 //封装的关于子cookie的方法:
    var SubCookieUtil = {
        get:function (name, subName) {
            var subCookies = this.getAll(name);
            if(subCookies){
                return subCookies[subName];
            }else{
                return null;
            }
        },
        getAll:function (name) {
            var cookieName = encodeURIComponent(name) + "=",
                cookieStart = document.cookie.indexOf(cookieName),
                cookieValue = null,
                cookieEnd,
                subCookies,
                i,
                parts,
                result = {};
            if(cookieStart > -1){
                cookieEnd = document.cookie.indexOf(";", cookieStart);
                if (cookieEnd == -1){
                    cookieEnd = document.cookie.length;
                }
                cookieValue = document.cookie.substring(cookieStart + cookieName.length, cookieEnd);
                if(cookieValue.length > 0){
                    subCookies = cookieValue.split("&");
                    for (i=0, len=subCookies.length; i < len; i++){
                        parts = subCookies[i].split("=");
                        result[decodeURIComponent(parts[0])] =
                                decodeURIComponent(parts[1]);
                    }
                    return result;
                }
            }
            return null;
        },
        set: function (name, subName, value, expires, path, domain, secure) {
            var subcookies = this.getAll(name) || {};
            subcookies[subName] = value;

        },
        setAll: function(name, subcookies, expires, path, domain, secure) {
            var cookieText = encodeURIComponent(name) + "=",
                    subcookieParts = new Array(),
                    subName;
            for (subName in subcookies){
                if(subName.length > 0 && subcookies.hasOwnProperty(subName)){
                    subcookieParts.push(encodeURIComponent(subName) + "=" +
                            encodeURIComponent(subcookies[subName]));
                }
            }
            if (subcookieParts.length > 0){
                cookieText += subcookieParts.join("&");
                if (expires instanceof Date) {
                    cookieText += "; expires=" + expires.toGMTString();
                }
                if (path) {
                    cookieText += "; path=" + path;
                }
                if (domain) {
                    cookieText += "; domain=" + domain;
                }
                if (secure) {
                    cookieText += "; secure";
                }
            }else{
                cookieText += "; expires=" + (new Date(0)).toGMTString();
            }
            document.cookie = cookieText;
        },
        unset: function (name, subName, path, domain, secure){
            var subcookies = this.getAll(name);
            if (subcookies){
                delete subcookies[subName];
                this.setAll(name, subcookies, null, path, domain, secure);
            }
        },
        unsetAll: function(name, path, domain, secure){
            this.setAll(name, null, new Date(0), path, domain, secure);
        }
      };

你可能感兴趣的:(js数据存储1:cookie操作总结)