了解cookie

在查了好多博客之后，发现很多博客对cookie的总结都是在分享如何存取cookie,在本人实践之后发现按照这些方法并不能实现cookie的存取。然后发现不是代码操作的问题，而是少安装了操作cookie所需要的依赖。遇到问题多思考，找出问题出现的原因和本质，才能高效快速的掌握所学习的内容

什么是cookie

cookie的作用

	为了解决HTTP协议的无状态性，引入cookie

cookie的存放位置

	cookie存放在浏览器上
	单个cookie不能超过4KB
	在以下位置中可以查看保存的cookie数据（浏览器按F12可找到该页面）

在这里插入图片描述

cookie中需要存入的值

参数	描述
Name	cookie的名称，一旦创建，不可更改
Value	cookie的值，若值为Unicode字符，需要为字符编码。若值为二进制数据，需要使用BASE64编码
Domain	可以访问cookie的域名。如设置为。liu.com，以liu.com结尾的域名都可以访问这个cookie
Path	cookie的使用路径，设置为/，则本禹铭下所有页面都可以访问这个cookie.
Expires/Max-Age	cookie的有效时间
Size	cookie的大小
HttpOnly	若此属性为true,则只会在HTTP头中有这个Cookie的信息，不能通过document.cookie来访问它
Secure	指定cookie是否仅被使用安全协议传输，默认为false
SameSite	用来限制第三方cookie,减少安全风险(防止CSRF攻击（CSRF攻击是：cookie存储用户的身份信息，恶意网站设法伪造带有正确cookie的HTTP请求）)

其中：name和value是必须要有的参数，其它参数是可选的

使用cookie

安装依赖

	在VUE项目中执行以下指令
	npm install js-cookie

基础操作

保存

        var exdate = new Date(); //获取时间
        exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * 10); //设置保存时长，这里设置为10天
        //字符串拼接cookie
        window.document.cookie =
          "name" + "=" + "123" + ";path=/;expires=" + exdate.toGMTString();    //保存

说明：在cookie中添加一个cookie名称为“”，cookie值为“”的数据，设置有效时长为10天
效果：
在这里插入图片描述

获取cookie

     //读取cookie并打印
        const name=getCookie("name");
        const liu =getCookie("liu");
        console.log(name);
        console.log(liu);

说明：读取cookie名称为"name"和"liu"的cookie的值并打印
在这里插入图片描述
效果