<Mac高频快捷键之前端篇 CSS常用的水平垂直居中方法>

简述浏览器缓存之cookie

#### 前言
　　cookie是客户端的一种缓存技术，作为无状态的HTTP扩展，常保存在浏览器中作为身份识别。[西法](http://www.boatsky.com "太空船博客")分别简述一下cookie的属性、js操作cookie以及cookie的容量限制。
#### cookie的属性
| 属性  | 说明  |
| ------------ | ------------ |
| Name  | key  |
|  value | value  |
| Domain  | 所在域名  |
| Path  | 所在路径  |
| Expires/Max-Age  | 过期时间  |
| Size  | 大小  |
| Secure  | 布尔值，如true，只能通过https传递  |
| HTTP  | 布尔值，如true,则表示httponly，不能使用JS操作该cookie  |
| SameSite  | Strict或Lax，前者不允许第三方站进入本站时使用该cookie，默认为后者  |

cookie域名有同源策略，cookie不能被跨域读写，但主域可设置删除子域cookie，子域只可读主域不可设置删除子域cookie，其他二级域名则互相不可访问。
虽然有同源策略，却可以csrf攻击，可使用token解决
cookie与端口无关
expires是HTTP/1.0定义的，指GMT格式的过期时间，一般比北京时间晚8小时，超过该时间点后失效；Max-Age指访问之后有效时间长度，是一个时间段。为了向下兼容，expires表现形式多一些

#### JS操作
```javascript
class cookieStorage {
    setCookie (name, value, sec) {
        let cookie = name + '=' + encodeURIComponent(value) + ';path=/';
        if (sec) {
            cookie += ";max-age="  + sec;
        }
        document.cookie = cookie;
    }
    getCookie (name){
        let val;
        let cookieArr = document.cookie.split(';');
        for(let v of cookieArr){
            let cookie = v.split('=');
            if(cookie[0].replace(/(^\s*)|(\s*$)/g, "") === name){
                val = cookie[1].replace(/(^\s*)|(\s*$)/g, "");;
                break;
            }
        }
        return val;
    }
    clearCookie(name){
        this.setCookie(name, '', -1);
    }
}
```
#### cookie容量限制
　　chrome下，同一个域名，最后可加入169个cookie。
　　同一个cookie，name与value值最长是4K左右(其中包括11个占位字节)，但实际使用中并不意味着cookie真能这么长，因为cookie会带入在http中header请求头cookie属性，会把doucment.cookie传给后台，header过大时，服务器会返回400 Bad Request Request Header Or Cookie Too Large错误，这由nginx　large_client_header_buffers设置的，一般默认是16K，可修改，但如果改的过大，可能会造成服务器处理慢、占用网络带宽等问题。
　　在部分老浏览器中，同一域名最多可能只使用30个cookie，所以，除了必要的数据，次要缓存可考虑保存在localStore或indexedDB中。

如果觉得有帮忙，您可以在本页底部留言。

简述浏览器缓存之cookie

全部留言

我要留言