Cookie

Cookie个人理解

• cookie参与客户端与服务器交互

cookie最初用于在客户端存储会话信息，服务器对HTTP请求发送 Set-Cookie，并将其添加在响应头中，包含会话信息，客户端存储cookie并将之后向该服务器的请求的请求头中都添加cookie，发送回给服务器。

cookie可以说是绑定在特定的域名下的。当设定了一个cookie后，再次向创建它的域发请求时，都会携带这个cookie。

每个域下的cookie总数是有限的，各浏览器之间有所不同

IE6 -	每个域名最多20个cookie
IE7+	每个域名最多50个
firefox	每个域名最多50个
Opera	每个域名最多30个
Safari Chrome	没有硬性规定

记得考虑cookie限制

cookie尺寸限制： 4096B±1长度限制。将整个cookie限制在4095B以内，可保证最佳性能，尺寸限制影响一个域下所有cookie，而不是单个cookie

cookie的构成

cookie有浏览器保存的以下几个信息构成

• 名称：唯一确定的cookie名称。 不区分大小写，cookie的名称是经过URL编码的
• 值：存储在cookie中的字符串，值也必须被URL编码
• 域 规定cookie对于哪个域是有效的。所有向该域发送的请求中都会包含这个cookie信息
• 路径 对于执行域中的路径，才向服务器发送cookie.
• 失效时间 表示何时删除该cookie的时间戳，如果不设置，浏览器默认会话结束删除cookie. 设置的是GMT格式的时间（Wdy, DD-Mon-YYYY HH:MM:SS GMT），设置了过期时间后，可以是cookie在浏览器关闭后依旧保存在用户的机器上，直到到时间清除cookie。如果设置的是当前时间之前的时间，那么立即清楚cookie
• 安全标志 指定后，只有SSL连接的时候才能发送到服务器。即cookie信息可以发送给https://www.xxx.com 而不能发送给 http://www.xxx.com secure 是cookie中唯一一个不是名值对儿的部分，只包含一个secure单词

完整cookie示例

Set-Cookie: name=value; expires=Mon , 23-Jan-07 18:19:00 GMT; demain=.xxx.xom; path=/; secure

域、路径、失效时间和secure标志 只是服务器发送给客户端的只是，这些参数不作为客户端发送回给服务器的cookie信息的部分，只包含name=value这部分

JavaScript中的Cookie

获取Cookie

JS通过document.cookie获取当前页面所有可用的cookie的字符串，一系列由分号隔开的名值对儿

如：

document.cookie   ->    'name1=val1;name2=val2;name3=val3;name4=val4;name5=val5..'
所有的名和值都是经过URL编码的，因此需要使用 decodeURIComponent()  来进行解码

设置值时，设置的值会添加到当前页面的cookie集合中，设置的名称已存在，则会覆盖之前的cookie名称。设置cookie的格式同Set-Cookie头中的格式

例：

document.cookie = "name=Gary"

每次向服务器发送请求时都会携带这个cookie，且浏览器关闭时，他就会自动删除

不过，设置cookie时，最好写成这样：

document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("Gary")

当需要指定额外参数时：

document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("Gary") + "; domain=.xxx.com; path=/ secure"

读，写，删cookie函数：

const cookieUtil = {
     
    get(name) {
     
        var cookieName = encodeURIComponent(name) + "=",
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null;

        if(cookieStart > -1){
     
            var cookieEnd = document.cookie.indexOf(";", cookieStart);
            if(cookieEnd == -1) {
     
                cookieEnd = document.cookie.length;
            }
            cookieValue = decodeURIComponent(document.cookie.substring(cookieStart +CookieName.length ,   cookieEnd));
        }
        return cookieValue
    },
    set(name , value , expires , path , domain , secure) {
     
        const cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);   //只有name value是必须有的
        if(expires instanceof Date) {
     
            cookieText += " ; expires=" + expires.toGMTString();
        }
        if(path) {
     
            cookieText += "; path=" + path
        }
        if(domain) {
     
            cookieText += "; domian=" + domain
        }
        if(secure) {
     
            cookieText += "; secure"
        };

        document.cookie = cookieText;
    },
    unset(name, path , domain, secure) {
        //使用之前相同的路径，域和安全选项重新将该cookie置空
        this.set(name, "" , new Date(0) , path, domain  , secure)
    }
}