1.认识Cookie

image.png

文本文件
辨别用户身份的数据
登录的时候，客户端登录，向服务器发送数据用户密码和账户名，服务器验证用户名和密码，服务器生成cookie，发送给浏览器，浏览器存储cookie，以后发送其他请求的时候携带这个cookie。

内存cookie，浏览器关闭掉就会消失。

cookie里面有过期时间，当浏览器发现浏览器发送给我们的response的header里面有一个cookie的化，我们开发者不需要做任何的事情，浏览器会自动读取这个cookie，并保存到我们的客户端上面。
下次我们发送请求的时候，我们request它会自动再它的header里面携带上cookie。服务器拿到这个cookie以后，读取里面内容，来验证这个用户是不是已经登陆过的用户，是的话，给你返回对应的资源，不是的话，应该会报错。

2.Cookie的用法

在vscode
D:\FrontEnd\04_尚硅谷js高级\课堂资料day01_32\课堂\资料\cookie-server\src> node index.js

然后浏览器输入，http://localhost:8000/test，打开工具栏，查看network

image.png
RespnseHeaders里面
image.png
然后浏览器就在下次发送请求的时候，就会携带这个请求
发送http://localhost:8000/demo
image.png

然后Request Header里面,就自动写有这个cookie

image.png

testRouter.get('/demo', (ctx, next) => {
  // 读取cookie
  const value = ctx.cookies.get('name');
  ctx.body = "你的cookie是" + value;
});

// 登录接口
testRouter.get('/test', (ctx, next) => {
  // maxAge对应毫秒
  ctx.cookies.set("name", "why", {
    maxAge: 60 * 1000,
    httpOnly: false
  })

  ctx.body = "test";
});
//它的有效期只有60s，超过的化，访问demo就是undefined

3.Cooke的常见属性

image.png

查看cookie的两种方式
1.点击小叹号

image.png
image.png

2.在application里面

image.png

如果用户需要退出登录，我们要删除cookie的化怎么办？
document.cookie
直接这么拿是拿不到服务器设置的cookie的。返回的是空字符串，但是我们可以通过这个设置cookie
document.cookie="age=18"
这样可以增加cookie

image.png

但是还是不能获得原来服务器的cookie
document.cookie=“”也是删不掉的。这是重新设置一个cookie，不过没有内容

image.png
image.png

蓝色的那一行。
可以
document.cookie="name=why;Max-Age=0;"
直接让这个cookie过期掉。

服务器返回的cookie是通过js，document.cookie是拿不到的，只能重新设置，让他无效。

image.png

4.cookie的缺点

1.浏览器会将cookie附加到每一次http请求中。只要浏览器有cookie，就会在每一次同damain的时候，请求头里面都有它。其实我们有些请求是不需要有对应的cookie的。会浪费流量。

2.cookie在传输的时候是明文传输的，在开发者工具里面就能看见。就算服务器加密了，但也是铭文传输的，有一定的安全风险。

3.有大小限制。最大4kb，.cookie的存储是4kb左右，存储量较小，一般页面最多存储20条左右信息。localStorage和sessionStorage的存储容量是5Mb(官方介绍，可能和浏览器有部分差异性)
5Mb＝1024*5kb

4. 如果使用cookie来验证登录，我们服务器要知道客户有没有登陆，必须通过cookie。浏览器会自动加上，但是ios，android，小程序都是客户端，对于某一些客户端来说，它可能不能自动给它设置cookie。比如ios，得手动给请求头里面添加cookie。所以说用cookie来做验证有一些麻烦。

现在大部分都是使用token，对称加密或者非对称加密。
我们可以根据当前请求需不需要验证登录来决定要不要携带这个cookie。