cookie 详解 与 封装 实用的cookie

在WEB前端开发中，cookie是必不可少的，网上也有很多开源的库可以使用，不过我还是想自己总结一下，做个笔记并封装一个实用的库。

（1）什么是cookie？

从web 角度 cookie是用于存储信息为下次访问 或者 与服务器之间传递信息的，

它可以记住用户上次操作了什么，操作到哪里了，为智能的操作提供基础。

它有自己的操作方式，有自己的大小，不过它的操作方式不太方便，可以依赖第三方库（下面我自己封装了一个）。

（2）cookie的基础知识点：

它有大小限制，一般不超过4kb,超出的将不再保存。

cookie 是不安全的，能通过查看cookies 或者 与服务器传递的header 中看到，所以不能报存重要的私密信息，如 用户的密码。

cookie 有自己的过期时间，可以用它来清除cookie。

cookie 保存的是字符串，多个cookies 之间用 ‘; ’分割，注意分号后还有一个空格，cookie 的key和value之间是“=”相连。

cookie 有其他高级存储方式如：path，domain，secure；

（3）cookie的简单操作：

1.存储和修改cookie:

document.cookie = 'key=value';

2.删除cookie:

document.cookie = 'key=value;expires=过去的时间.toUTCString()';

（4）cookie的高级操作：
 1.过期时间（expires）

    cookie 不是对象，不能通过操作对象的方式删除某个cookie，你可能会说把value设置为null或者undefined可以吗？答案是不可以，设置了null/undefined 获取的值
就是null/undefined，这条cookie是一直存在，并没有删除。如下图：

   expires 的作用就在此刻显示了出来，通过设置过期时间可以删除这条cookie，同时也可以把过期时间延迟，从而延长这个cookie存在的时间，默认情况下，
expires 是 session,关闭浏览器cookie清除。
   由于上面说过，cookie是String 类型的，那保存的时间格式也只能是字符串类型的，我们可以用toUTCString()把时间格式化成字符串，我们也可以
用toGMTString(),不过toGTMString()已经被toUTCString代替了(来自w3c)，

 2.路径（path）
   path默认是当前浏览网页的父级文件夹，我们可以通过设置path 实现跨多个文件共用这条cookie。例如：
我有这个文件，截图如下：

我在setCookie.html中写下：

document.cookie='from=我是来自setCookie;path=/testCookie';

注意：我把path设置为‘/testCookie’，在getCookie.html中写下：

console.log('我是twoFile里面的getCookie,获取的cookie是:'+document.cookie);

设置的结果：

 获取的结果：

从中可以看出我在one文件夹中设置的cookie，在two文件夹中获得了。

3.域（domain）
     cookie 可以通过设置domain实现同域访问，前提是path='/',这里一定要注意是同域，而非跨域。
比如 http://news.baidu.com 与 https://www.baidu.com ，如果想设置同域访问，设置如下：

 document.cookie = 'key=value;path=/;domain=baidu.com';

    
4.安全(secure)
    我上面说了，cookie是不安全的，为何cookie有个安全（secure）呢？
    其实大家不要误解了这个安全，如果设置了secure ，则保证 cookie 与服务器之间的数据传输过程加密，但是保存在本地的并没有发生任何改变，
有人说那我可以前端加密，算我没说，后面我们在聊聊前端加密问题，现在仅仅谈论secure的作用，我感觉这个作用不大，搞开发这么长时间了，直到现在没
有用过，（如有不同意见谢谢批评指出）。用法如下：

 document.cookie = 'key=value;secure';

（5）问题：（cookie 与服务器传输，怎么传输的，在什么地方看到的，服务器（我用的node.js）如何获得？）
 cookie与服务器传输是在Request Headers 中，如下图：

 不过在header中分两种情况：

 1.同域：服务器和web在统一域名下，这种情况下cookie默认是加到header中的，
 2.跨域：服务器和web不在统一域名下，这种情况下就相对复杂了，但是这种情况在实际开发中是最常见的，

 因为前后台分离是大势所趋，人心所向。那我们细细谈谈。其实，跨域下默认header 没有cookie的，原因很明显，那就是相对性的安全，这点也很好理解，
 那问题是，我们如何解决让header中有cookie呢？

 xhr.withCredentials = true;

加上这段就可以了，这就解决了跨域安全策略，告诉ajax 放心传cookie吧，这个API是可以信赖的，
注意：如果同域 这个参数是没有用的 无论true或者false（Setting withCredentials has no effect on same-site requests.）。

前端解决了，问题是，你给cookie,服务器想要么，如果不想要，ajax就会报错（我的片面理解）。服务器若想要cookie,拿node.js为例 设置如下：

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Credentials", "true");
    res.header("Access-Control-Allow-Origin", "http://localhost:63342");
});

特别注意: 给一个带有withCredentials的请求发送响应的时候,服务器端必须指定允许请求的域名,不能使用'*'.上面这个例子中,如果响应头是这样
的:Access-Control-Allow-Origin: * ,则响应会失败.在这个例子中 Access-Control-Allow-Origin 的值是 http://localhost:63342 
这个指定的请求域名。

（6）个人认为开发中应用场景

   登录记住两周功能：这个例子，记住的不是用户的帐号和密码，那是不安全的，而是后台根据用户信息、浏览器情况、ip等合成并返回一个用
户登录标识符（如 uid），记在cookie中，等下次进入或者刷新时，读取这个uid,判断是否已经登录了，并返回登录后应该返回的信息。

上面的是自己的拙见，若有错误，请无私的批评，谢谢大家！
好了cookie基本说完了，咱们实战一下，这是我封装的cookie用法：

(function ($window, $document) {
    function isUndefined(value) {
        return typeof value === 'undefined';
    }

    function isDefined(value) {
        return typeof value !== 'undefined';
    }

    function isString(value) {
        return typeof value === 'string';
    }

    function getBaseHref() {
        var oBase = $document.getElementsByTagName('base')[0];
        if (!oBase) {
            return '';
        }
        var href = oBase.getAttribute('href');
        return href ? href.replace(/^(https?:)?//[^/]*/, '') : '';
    }

    function cookieWriter(key, value, options) {
        var path, expires, defaultPath = getBaseHref();
        options = options || {};

        path = isDefined(options.path) ? options.path : defaultPath;
        if (isUndefined(value)) {
            expires = 'Thu, 01 Jan 1970 00:00:00 GMT';
        }
        if (isString(expires)) {
            expires = new Date(expires);
        }
        var str = encodeURIComponent(key) + '=' + encodeURIComponent(value);
        str += expires ? ';expires=' + expires.toUTCString() : '';
        str += path ? ';path=' + path : '';
        str += options.domain ? ';domain=' + options.domain : '';
        str += options.secure ? ';secure' : '';
        $document.cookie = str;
    }

    function cookiesReader() {
        var currentCookie = $document.cookie || '',
                cookie, index, lastCookies = {}, name;

        var cookieArray = currentCookie.split('; ');

        for (var i = 0; i < cookieArray.length; i++) {
            cookie = cookieArray[i];
            index = cookie.indexOf('=');
            if (index > 0) {
                name = decodeURIComponent(cookie.substring(0, index));
                lastCookies[name] = decodeURIComponent(cookie.substring(index + 1));
            }
        }
        return lastCookies;
    }

    function getCookieByKey(key) {
        var lastCookies = cookiesReader();
        for (var i in lastCookies) {
            if (i === key) {
                return lastCookies[i];
            }
        }
        return '';
    }

    function toJson(value) {
        try {
            return JSON.parse(value);
        } catch (e) {
            return value;
        }
    }

    $window.$cookie = {
        //获取cookie
        get: function (key) {
            return getCookieByKey(key);
        },
        //获取cookie对象
        getObject: function (key) {
            return JSON.parse(getCookieByKey(key));
        },
        //获取全部cookies，allParse 是否完全解析josn
        getAll: function (allParse) {
            if (!allParse) {
                return cookiesReader();
            }
            var lastCookies = cookiesReader();

            for (var i in lastCookies) {
                lastCookies[i] = toJson(lastCookies[i]);
            }
            return lastCookies;
        },
        //设置或者修改cookie，value是字符串
        put: function (key, value, options) {
            cookieWriter(key, value, options);
        },
        //设置或者修改cookie,value是对象
        putObject: function (key, value, options) {
            value = JSON.stringify(value);
            cookieWriter(key, value, options);
        },
        //移除cookie
        remove: function (key) {
            cookieWriter(key);
        },
        //移除全部cookies
        removeAll: function () {
            var cookies = cookiesReader();
            var keys = Object.keys(cookies);
            for (var i in keys) {
                this.remove(i);
            }
        }
    };
})(window, document);

   测试代码：

<button id="addBtn">添加</button>
<button id="removeBtn">移除</button>
<button id="getBtn">获取</button>
<script>
    var addBtn= document.getElementById('addBtn');
    var getBtn=document.getElementById('getBtn');
    var removeBtn=document.getElementById('removeBtn');

    addBtn.onclick=function(){
        $cookie.put('str','zhang',{path:'/'});
        $cookie.putObject('obj',{name:'zhang'},{path:'/'});
    };

    getBtn.onclick=function(){
        console.log($cookie.getObject('str'));
        console.log($cookie.getObject('obj'));
        console.log($cookie.getAll(true));
    };

    removeBtn.onclick=function(){
        $cookie.remove('str');
    };
</script>

上面的是我的总结，如果大家发现什么地方，希望批评指出，共同进步，谢谢大家。