javascrip cookie

Posted 2020-06-18 phlsheji

首先要明白一下cookie的概念。由于HTTP协议是一种无状态协议，也就是说一旦server和client的数据交换完成后，他们之间的连接就会被断开。再次交换数据的时候就须要再次建立连接。这就意味着server无法从连接上推断client。
为了解决问题，W3C引入了cookie机制。cookie就好比一个身份证，client请求server的时候。server将这个身份证颁发给client。client（浏览器）将这个身份证保存在本地。当下次连接server时。client携带这个身份证请求server。server依据身份证就可以确定用户身份。
cookie不仅client能訪问到，由于client请求server的时候会将cookie放在请求头里带到server，所以server也能对cookie进行操作。这里讨论使用javascript在client对cookie进行操作的方法。

一、写入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是具有不可跨域性的。用户訪问百度的时候。百度为client颁发了一个cookie，用户再去訪问谷歌。谷歌给client颁发一个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是保存在client本地的。所以查看cookie是非常方便，这也暴露了cookie的不安全性，所以一般cookie不存放如password等重要信息，secure属性并非用来设置cookie内容的安全性的，而是用于传输过程中的安全，设置secure后，仅仅保证 cookie 与server之间的传输数据过程加密，而保存在本地的 cookie文件并不加密。所以假设是想让本地保存的cookie也加密的话，最好在保存cookie值的时候就保存加密后的数据。

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

二、读取cookie

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

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

三、删除、改动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();

四、封装操作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天