javascript中的cookie问题

在他处看到一篇好文章，想记录在本身的学习笔记中，原文做者看到我转载如果介意，联系我立马就删除，附上原文连接：
http://blog.csdn.net/sunhengzhe/article/details/46694039

首先要明确一下cookie的概念，由于HTTP协议是一种无状态协议，也就是说一旦服务器和客户端的数据交换完毕后，他们之间的链接就会被断开，再次交换数据的时候就须要再次创建链接，这就意味着服务器没法从链接上判断客户端。
为了解决这个问题，W3C引入了cookie机制。cookie就比如一个身份证，客户端请求服务器的时候，服务器将这个身份证颁发给客户端，客户端（浏览器）将这个身份证保存在本地，当下次链接服务器时，客户端携带这个身份证请求服务器，服务器根据身份证便可肯定用户身份。
cookie不只客户端能访问到，由于客户端请求服务器的时候会将cookie放在请求头里带到服务器，因此服务器也能对cookie进行操做，这里讨论使用javascript在客户端对cookie进行操做的方法。

1、写入cookie

写入cookie主要设置五个字段，内容、有效期、域名、路径、是否安全传输。

内容

cookie是以键值对形式保存的，要新建一个名为name，值为zhangsan的cookie就是“name=zhangsan”，只需将这个cookie赋值给document.cookie便可：

document.cookie = "name=zhangsan";  //添加cookie

document.cookie有读和写两种形式，上面这个形式即是写形式，写形式表明添加cookie，且一次只能添加一条cookie，要添加多条则须要调用屡次。如

document.cookie = "name=zhangsan;age=10"; //无效，只添加了name，忽略age
document.cookie = "age=10";  //添加age

有效期

默认状况下，cookie在关闭浏览器的时候就会被清除，想让cookie存放更长时间能够经过设置expires字段实现。
expires字段须要的值是GMT(格林威治时间)格式的日期型字符串，能够用Date对象获得：

var date = new Date();
//将时间设置成30分钟之后
date.setTime(date.getTime() + 30 * 60 * 1000);
//name=zhangsan将在30分钟后过时
document.cookie = "name=zhangsan;expires="+date.toGMTString();

想调整过时时间，只须要改动setTime一行的代码。

域名

处于安全性的考虑，cookie是具备不可跨域性的，用户访问百度的时候，百度为客户端颁发了一个cookie，用户再去访问谷歌，谷歌给客户端颁发一个cookie，那么百度和谷歌是不能访问到彼此的cookie的。
可是通常来讲，咱们访问baidu.com的时候会发现，你是能够访问到map.baidu.com的cookie的，这是由于给cookie设置了domian属性，由于map.baidu.com和baidu.com具备一样的域名baidu.com，因此能够为cookie设置domian值为baidu.com

document.cookie = "name=zhangsan;domain=baidu.com";

路径

一样道理，blog.csdn.net是访问不到blog.csdn.net/sunhengzhe里面的cookie的（但反过来能够），为了使上级目录访问到下级目录，在blog.csdn.net/sunhengzhe里新建cookie时，能够为cookie设置path属性，通常能够直接将其设置为根目录

document.cookie = "name=zhangsan;path=/";

安全传输

cookie是保存在客户端本地的，因此查看cookie是很方便，这也暴露了cookie的不安全性，因此通常cookie不存放如密码等重要信息，secure属性并非用来设置cookie内容的安全性的，而是用于传输过程当中的安全，设置secure后，只保证 cookie 与服务器之间的数据传输过程加密，而保存在本地的 cookie文件并不加密。因此若是是想让本地保存的cookie也加密的话，最好在保存cookie值的时候就保存加密后的数据。

document.cookie = "name=zhangsan;secure";

2、读取cookie

读取cookie使用到document.cookie的读模式，返回的就是全部的cookie，中间用分号隔开。

document.cookie = "name=zhangsan";  //写
document.cookie = "age=10";  //写
console.log(document.cookie);  //输出 name=zhangsan; age=10

3、删除、修改cookie

cookie并不提供删除、修改的方法，若是想修改某项cookie，只需添加一个同名cookie，新的值将覆盖旧的值。

document.cookie = "name=zhangsan";
document.cookie = "name=lisi";  //name被修改成lisi

要删除cookie，只需将该cookie有效期设置到当前时间之前便可。

var date = new Date();
//设置为前一毫秒（多前均可以）
date.setTime(date.getTime() - 1);
//删除name
document.cookie = "name=lisi;expires=" + date.toGMTString();

4、封装操做cookie的方法

使用原生方法对cookie操做是有些麻烦的，咱们能够将其封装起来，name表明键名，value表明值，不填则为读取名为name的值，option表明设置值若有效期等。其中有效期单位为天。

function cookie(name, value, options) {
    if (typeof value != 'undefined') {
        options = options || {};
        //若是值为null, 删除cookie
        if (value === null) {
            value = '';
            options = {
                expires: -1
            };
        }
        //设置有效期
        var expires = '';
        if (options.expires && (typeof options.expires == 'number' || options.expires.toGMTString)) {
            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.toGMTString();
        }
        var path = options.path ? ';path=' + (options.path) : '';
        var domain = options.domain ? ';domain=' + (options.domain) : '';
        var secure = options.secure ? ';secure' : '';
        //设置cookie
        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
    } else {
        //读取cookie
        if (document.cookie.length > 0) {
            var start = document.cookie.indexOf(name + "=")
            if (start != -1) {
                start = start + name.length + 1;
                var end = document.cookie.indexOf(";", start);
                if (end == -1){
                    end = document.cookie.length;
                }
                return decodeURIComponent(document.cookie.substring(start, end));
            }
        }
        return ""
    }
}

cookie("name", "zhangsan"); //添加name=zhangsan
cookie("name", null); // 删除name
cookie("age", "10", {
    expires: 30
}); // 添加age=10且有效期30天