cookie vue-cookie

cookie介绍

可以大致把Cookie分为2类： 回话cookie和持久cookie
会话cookie: 是一种临时的cookie，它记录了用户访问站点时的设置和偏好，关闭浏览器，会话cookie就被删除了
持久cookie: 存储在硬盘上，（不管浏览器退出，或者电脑重启，持久cookie都存在）， 持久cookie有过期时间

cookie是存储在客户端浏览器的一段文本信息
　　1.大小限制在4KB
　　2.一个网站的cookie数量在50条左右
　　3.存入cookie有一定的风险
　　4.可以设置有效期，默认的为会话结束
　　5.一般路径为根目录
　　6.可以设置域名
　　7可以设置secure，通过https访问（secure属性：当设置为true时，表示创建的 Cookie 会被以安全的形式向服务器传输，也就是只能在 HTTPS 连接中被浏览器传递到服务器端进行会话验证，如果是 HTTP 连接则不会传递该信息，所以不会被窃取到Cookie 的具体内容。）

vue-cookie

语法

this.$cookies.set(keyName, value,time,path,domain,secure)

KeyName是cookie的键，
value是对应的值，（vue-cookie会自动帮你把对象转为json）
time为何时自动删除，默认时间为1d
path为存放路径，（设置path: '/projectName/‘指定项目名下’/projectName/'使用）
domain为域名，默认为请求地址
secure为是否要以安全的方式传输 （Secure属性是说如果一个cookie被设置了Secure=true，那么这个cookie只能用https协议发送给服务器，用http协议不发送。）

相关方法

//cookie的设置
this.$cookies.set(keyName, value,time,path,domain,secure)
// cookie的获取
this.$cookies.get(keyName)   //KeyName就是设置的cookie的名字，vue-cookie会将cookie自动转为json对象格式
// cookie的删除
this.$cookies.remove(keyName)
// 支持判断本地是否有此cookie
this.$cookies.isKey(keyName)  
// 获取本地所有cookie的名称
this.$cookies.keys()

vue-cookie的时间有以下几个格式

1.直接设置数字：0，1，-1。设置为0即会话结束就删除cookie，设置1即一秒后删除，设置-1即此cookie永不删除，60 + 30即为1分30秒后，60*60即为1小时后，1就代表一秒
2.设置为字符串，比如："1s"即为一秒后删除、"2min"就是两分钟、"3h"就是3个小时、"4d"就是4天、"5m"就是5个月、"6y"就是6年
3.也可以自定义设置时间 比如：new Date(2019,9,13).toUTCString()

//意思为创建一个名为 test 的cookie ，值为{a:1,b:2},时间为0，即会话结束就删除cookie，存放在根目录 / 下
this.$cookies.set('test', '{a:1,b:2}',0,'/')   

this.$cookies.set('test', '{a:1,b:2}',-1)  //永不删除
this.$cookies.set('test', '{a:1,b:2}',60)  //一分钟后删除
this.$cookies.set('test', '{a:1,b:2}','10s')  //10秒后删除
this.$cookies.set('test', '{a:1,b:2}',new Date(2019,9,13).toUTCString())  //2019年10月13日删除，new Date月份设置是从0开始的

参考

cookie、vue-cookie、js-cookie - 遥遥小公主 - 博客园