cookie

前言

• web应用程序使用http协议传输数据。而http是无状态的协议，一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法葱绿连接上跟踪会话。

• 登录页面，关闭后重新打开后页面不用输入自动登录。？

• 我们可以将登录信息存入Cookie中，再次打开页面只要cookie中的登录信息还处于存活期，则就能自动登录

Cookie定义：

• cookie是由服务器端生成的，发送给User-Agent（一般是浏览器），（服务器告诉浏览器设置一下cookie），浏览器会将cookie以key/value的形式保存在某个目录下的文本文件内，下一次请求同一网站时就发送该cookie给服务器（前提是浏览器设置启用cookie）。

• 当我们打开页面后进行的数据交互，浏览器会将一部分信息暂时存储到浏览器的目录下，即cookie，在cookie的存活周期下，我们关闭页面再次打开后，cooie中的信息我们就可以立即使用，而不需要再次请求数据交互

Cookie特点：

• 满足同源策略

  • 虽然image.google.com和www.google.com同属于google，但是域名不一样，二者同样不能相互操作彼此的Cookie。

  • 访问zhidao.baidu.com后，再访问wenku.baidu.com，还需要重新登录百度账号吗？

    • 解决1：写入cookie时，设置其domaind都为.baidu.com,即只要其二级域名相同，则可共享该cookie

    • 解决2：通过document.domain，设置document.domain = 'baidu.com',则所有二级域名为baidu.com的页面都可以和该页面共享cookie（限制条件，设置document.domain的页面其url必须也有baidu.com,即也处于该基础域名下）

• Cookie内存大小受限制:

  • Cookie有个数和大小的限制，内存大小一般是4k

  • 浏览器不同，其设置的每个域名限制设置的Cookie的个数样式不一样的

    • IE6：20

    • IE 7.0 8.0 -> 50

    • Opera -> 30

    • FF -> 50

    • safari -> 无限制

    • chrome -> 53

• Cookie在本地，可以被更改文件，敏感的数据不要放到Cookie中

cookie属性

• name：cookie的名字

• value: cookie的值

• domain：只有和domain值相同才能共享该条数据

• path：cookie存放路径

• expires：cookie的有效期，当设置cookie过期时间为0或者忽略不设置的情况下，cookie将会在session过期后过期（即浏览器关闭后cookie过期）

• secure： 如果secure的属性值为true，则https下的资源可以送到服务器，secure的属性值为false，则https下的资源不能送到服务器，http不受此设置影响

cookie的简单操作

• 本地文件环境下，我们无法设置Cookie，也无法查Cookie，需要在服务器环境下

1. document.cookie

2. 通过new Date()、setDate()来设置Cookie的存活周期

   • 通过document.cookie 显示出所有的cookie信息

   • 通过设置document.cookie = "name=lyl"即可添加一条cooike，多个cookie之间自动用;连接（这样一次只能添加一条cookie，即一个名字和一个值）

   • document.cookie = 'name=lyl;expires=...' 通过添加指定属性和值，设置该条cookie的一些属性

3. 封装函数

• 添加一条cookie

 // 封装函数1
    function setCookie (name, value, iDay) {
        var oDate = new Date();
        oDate.setDate(oDate.getDate() + iDay);

        document.cookie = name + '=' + value + ';expires=' + oDate;
    }
    eg: setCookie('name', 'lyl', 10);;

// 若有其他属性的添加的封装
     function setCookie(name, value, duration, path, domain, secure) {
        // name + value
        var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
        // 生存期，此处参数设为天数
        var oDate = new Date();
        oDate.setDate(oDate.getDate() + duration);
        console.log(oDate);
        cookieText = cookieText + ";expires=" + oDate.toGMTString();
        // path
        if(path) {
            cookieText = cookieText + ';path=' + path;
        }
        // 作用域
        if(domain) {
            cookieText = cookieText + ';domain=' + domain; 
        }
        // secure
        if(secure) {
            cookieText = cookieText + ';secure=' + secure;
        }
        document.cookie = cookieText;
        console.log(cookieText);
    }
    eg: setCookie('name', 'duyi', 7);

• 查看cookie

// 封装函数1
    function getCookie (name) {
        var str = document.cookie;
        var arr = str.split(';');
        for(var i = 0, len = arr.length; i < len; i++) {
            var oneCookie = arr[i].split('=');
            if(oneCookie[0] === name) {
                return oneCookie[1];
            }
        }
    }
   eg: getCookie('name');

 // 方案2，获取名为name的cookie值开始和结尾的索引
    function getCookie(name) {
        var cookieName = encodeURIComponent(name)+ '=',
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null;
        // 存在name该cookie
        if(cookieStart > -1){
            var cookieEnd = document.cookie.indexOf(';',cookieStart);
            // 只有一条名为name的cookie
            if(cookieEnd == -1){
                cookieEnd = document.cookie.length;
            }
            // substring(start, end) 方法用于提取字符串中介于两个指定下标之间的字符,包括 start 处的字符，但不包括 end 处的字符。
            // substr(start, [length) 方法用于返回一个从指定位置开始的指定长度的子字符串,包含指定开始位置, start为负值，则倒过来截取即可
            cookieValue = decodeURIComponent(document.Cookie.substring(cookieStart + cookieName.length,cookieEnd));
        }
        return cookieValue;
    }    

• 删除cookie（重新）

// 将名为name的cookie有效期设为-1，即昨天就过期了，所以浏览器就会将该条cookie删去(注意：我们将该条cookie的有效期设为0，该cookie不会立刻删去，该cookie的有效期会变为Session) 
    function removeCookie(name) {
        setCookie(name, '', -1);
    }

小demo

• 一个可拖拽的div方块，从初始位置拖到某个其他位置，关闭页面后，再次打开该页面后，该div方块仍为关闭浏览器是的位置

 <script>
        var oDiv = document.getElementsByTagName('div')[0];
        
        // cookie的一些操作函数
        function removeCookie(name) {
            setCookie(name, '', -1);
        }
        function setCookie (name, value, iDay) {
            var oDate = new Date();
            oDate.setDate(oDate.getDate() + iDay);

            document.cookie = name + '=' + value + ';expires=' + oDate;
        }
         function getCookie (name) {
            var str = document.cookie;
            var arr = str.split(';');
            for(var i = 0, len = arr.length; i < len; i++) {
                var oneCookie = arr[i].split('=');
                if(oneCookie[0] === name) {
                    return oneCookie[1];
                }
            }
        }
        
        // 获取cookie值，若有x和y的cookie值，则初始化oDiv的位置
        var x = getCookie('x');
        var y = getCookie('y');
        if(x) {
            oDiv.style.left = x + 'px';
            oDiv.style.top = y + 'px';
        }
        oDiv.onmousedown =  function(e) {
                // console.log('mousedown');
                var event = e || window.event;
                var disX = event.clientX - this.offsetLeft;
                var disY = event.clientY - this.offsetTop;

                document.onmousemove = function(e){
                    var event = e || window.event;

                    oDiv.style.left = event.clientX - disX + 'px';
                    oDiv.style.top = event.clientY - disY + 'px';
                    console.log(oDiv.style.top);
                }

                document.onmouseup = function (e) {
                    document.onmousemove = null;
                    document.onmouseup = null;
                    // 存取最后存取位置信息到cookie
                    setCookie('x', oDiv.offsetLeft, 1);
                    setCookie('y', oDiv.offsetTop, 1);
                }
         };
    </script>