cookie-白红宇

阅读量：4957 次

发布时间：2019-06-12

本文共 4047 字，大约阅读时间需要 13 分钟。

前言

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，需要在服务器环境下

document.cookie

通过new Date()、setDate()来设置Cookie的存活周期
- 通过document.cookie 显示出所有的cookie信息
- 通过设置document.cookie = "name=lyl"即可添加一条cooike，多个cookie之间自动用;连接（这样一次只能添加一条cookie，即一个名字和一个值）
- document.cookie = 'name=lyl;expires=...' 通过添加指定属性和值，设置该条cookie的一些属性

封装函数

添加一条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);    }