了解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的值并打印
效果