简述:js-cookie和vue-cookies都是vue项目中的插件,下载相关依赖后,可以用来存储、获取、删除Cookie等操作,思路相同,操作时稍有不同,当然也可以用原生js来获取Cookie;
⭐ js-cookie ⭐
使用方式:
1、下载安装依赖,js-cookie;
//在项目中使用npm下载相关依赖
npm install --save js-cookie
2、页面引入使用;
//然后在main.js或者需要使用的页面引入
import Cookies from 'js-cookie'
3、js-cookie,使用详细(存储 获取 删除);
存储Cookie:
// 创建一个名称为name,对应值为value的Cookie,由于没有设置失效时间,
// 默认失效时间为该网站关闭时
Cookies.set('name', 'value')
// 创建一个有效时间为7天的Cookie
Cookies.set('name', 'value', { expires: 7 })
// 创建一个带有路径的Cookie
Cookies.set('name', 'value', { expires: 7, path: '' })
// 创建一个value为对象的Cookie
const obj = { name: 'xiaohong' }
Cookies.set('user', obj)
获取Cookie:
// 获取指定名称的Cookie
Cookies.get(name) // value
// 获取value为对象的Cookie
const obj = { name: 'xiaohong' }
Cookies.set('user', obj)
JSON.parse(Cookies.get('user'))
// 获取所有Cookie
Cookies.get()
删除Cookie:
// 删除指定名称的Cookie
Cookies.remove('name')
// 删除带有路径的Cookie
Cookies.set('name', 'value', { path: '' })
Cookies.remove('name') //直接删,会报错!
Cookies.remove('name', { path: '' }) // success!
// more
// 当你删除一个cookie时,你不依赖于默认属性,
// 你必须传递与用来设置cookie完全相同的路径和域属性:
Cookies.remove('name', { path: '', domain: '.yourdomain.com' })
⭐ vue-cookies ⭐
使用方式:
1、下载安装依赖,vue-cookies;
npm i --save vue-cookies
import VueCookies from 'vue-cookies';
Vue.use(VueCookies);
3、vue-cookies,使用详细(存储 获取 删除);
存储一个Cookie:
this.$cookies.set("token", value1, {expires: "7D"});
// keyName => "token"
// value => value1
// 设置过期时间 = > {expires: "7D"}
获取一个Cookie:
this.$cookies.get("token") // return value
删除一个Cookie:
this.$cookies.remove("token"[, path [, domain]]) // return this
Cookie是否存在:
this.$cookies.isKey("token") // return false or true
获取所有 Cookie ,以数组形式返回:
this.$cookies.keys() // return a array
设置Cookie过期时间:
//30天后过期,全局设置
this.$cookies.config('30d')
y:year 年
m:month 月
d: day 日
h:hour 时
min: minute 分
s :second 秒
//填的值1d为一天,1h为一小时,1min为一分钟,1s为1秒,不分大小写
//不写过期时间,默认为1天过期
感觉有用,就一键三连,感谢(●'◡'●)