vue项目中cookie的使用

Vue使用cookie和session

1：cookie和session

　　为了防止数据运输或存储终端，特地设置了cookie和session，他们其实都是将数据存储当地。

　　cookie数据保存在客户端，session数据保存在服务器端

　　所以一般session的使用会比cookie的使用会更加安全， 将登陆信息等重要信息存放为SESSION;其他信息如果需要保留，可以放在COOKIE中。 防止服务器端数据泄露，当然，同时session的高安全与高访问量也会导致服务器性能占比也会大很多。

2：cookie的使用

//1.引入cookie依赖
npm install vue-session/vue-cookies --save
​
//2.给main.js配置使用：
import Vuecookie/Vuesession from 'vue-cookie/vue-session'
Vue.use(Vuecookie/Vuesession)
​
//3.使用：
this.$session.set("key",value);//创建session，或者再加一个表示持续时间的参数
this.$session.get("key");//获取session对象

3: 配置Cookie

//1.同上导入依赖
//2.配置main.js
import cookie from 'vue-cookie'
Vue.prototype.$cookie=cookie//创建本地cookie
​
//3.组件当中使用：
create(){this.$cookie.set('token',"asdasd")}
mouted(){this.$cookie.get('token')}
destory(){this.$cookie.delete('token')}
​
//4.设置到期时间：
    this.$cookies.config('固定时间') //填的值1d为一天,1h为一小时,1min为一分钟,1s为1秒
 
    //指定时间
    this.$cookies.config(new Date(2020,12,1))
    this.$cookies.config("Sat, 13 Mar 2017 12:25:57 GMT")
​
    //不写过期时间，默认为1天过期
    this.$cookies.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX")

4:参数配置

默认：$cookies.config(expireTimes[,path[, domain[, secure[, sameSite]]])

默认: expireTimes = 1d, path = '/', domain = '', secure = '', sameSite = ''

key : cookie名

value : cookie值, vue-cookie 会自动帮你把对象转为:

json if (value && value.constructor === Object ){
    value = JSON.stringify(value)
}
expireTimes : cookie有效时间，默认时间为1d 可为到期时间点(expire=) [Date]，也可为有效时间段单位s(max-age=)[Number]， 传入Infinity||-1被认该cookie永久有效， 传入0 会被判断为false导致取默认值， 传入非-1 的负数会立即删除该cookie， 传入String类型但又不会被正则匹配的('0'、'abc'、'Session')则关闭浏览器的时候销毁cookie(Expire/Max-Age=Session)，效果类似Session。

path : cookie所在目录，默认 '/' 根目录

domain : cookie所在的域，默认为请求地址

secure : Secure属性是说如果一个cookie被设置了Secure=true，那么这个cookie只能用https协议发送给服务器，用http协议不发送