【存储】如何理解Cookie?

Cookie:

1. 本身用于浏览器和server通讯 （也就是说本身是http请求的一部分）
2. 被“借用”来做本地存储 (怎么叫被“借用”来做本地存储呢？因为localStorage/sessionStorage是HTML5之后才提出来的，大约在10/09年提出来的，那个时候互联网(电脑-网站)发展的非常好了，移动互联网(手机)还没发展很好，那时候没有localStorage/sessionStorage的时候，只能用cookie做本地存储)
3. 可用document.cookie = ‘…’ 来修改 (这里是前端的用JS的修改方式，后端也可以修改cookie,因为cookie本身是通讯的标准)

1. 从图中可以看出来，Request Headers 里面就有Cookie,也就是说，它是用来浏览器和server端通讯，所以说现在即便是HTML5已经普及，localStorage/sessionStorage被我们使用，但Cookie还是有它的价值，它的价值不在于说本地存储，而在于本地和服务端通讯，所有说这里有Cookie的信息。Cookie是一个字符串的形式，字符串形式都是通过分号分隔的形式，每一步都是key=value的形式!
2. 我们可以通过Application可以看到Cookie的一些它拆分开来的一种形式。当前域名下的

从上图中，可以看出Cookie是通过分号分隔的字符串形式，每一部分都是key=value的形式;刚开始未加Cookie,访问时为空，添加后，访问就有了。**Cookie每次添加只能赋值一个，如果赋值多个会自动截取，取第一个。每赋值一个，Cookie就添加一遍;**比如图中刚开始是赋值a=100,后面赋值b=200,document.Cookie出来后就是“a=100;b=200”;是一个追加的过程,不是覆盖的过程;当a修改为300时，同一个key它会覆盖，但是不同key的话，它会在尾部追加。

在Application中，Cookies就拆分开了key,value形式。

这时候去访问页面，看一看Request Headers就会看到刚刚写的Cookie，这时候去访问页面，服务端是能够兼容到Cookie的。比如说我们Cookie里面有一个userId是多少，服务端接受Cookie后就知道登录用户是谁了。登录的过程经常用Cookie去实现！

Cookie为什么能做本地存储呢？

刚刚我们存了一个Cookie信息，下图，当页面一刷新，出来的还是这个信息。也就是说我们的Cookie不清除，我们赋值完之后，这个页面不管怎么刷新，这个Cookie出来的都是这个信息。

比如说我们再加一个’e=500’,这个时候就是四个信息

再次刷新，还是四个信息。

也就是我们通过前端对Cookie进行赋值，然后页面不管怎么刷新，这个赋的值都会在的。就是浏览器会帮我们存储下来。所以说Cookie能做本地存储。这也是我们在HTML5规范或普及之前唯一的，能在页面中做本地存储的一种能力。

但是要明白，Cookie当初的设计并不是做本地存储，而是为了浏览器和服务端直接进行通讯，它只是被借用来做本地存储。

Cookie的缺点：

1. 存储大小，最大4KB
2. http请求时需要发送到服务端，增加请求的数据量
3. 只能用ducument.cookie = ‘…’来修改，太过简陋(追加)

使用 cookie 时需要考虑的问题

• 因为存储在客户端，容易被客户端篡改，使用前需要验证合法性
• 不要存储敏感数据，比如用户密码，账户余额
• 使用 httpOnly 在一定程度上提高安全性
• 尽量减少 cookie 的体积，能存储的数据量不能超过 4kb
• 设置正确的 domain 和 path，减少数据传输
• cookie 无法跨域
• 一个浏览器针对一个网站最多存 20 个Cookie，浏览器一般只允许存放 300 个Cookie

移动端对 cookie 的支持不是很好，而 session 需要基于 cookie 实现，所以移动端常用的是 token