1. script引用
2. npm引用
npm install vue-cookies --save
// require
var Vue = require('vue')
Vue.use(require('vue-cookies'))
//或者
// es2015 module
import Vue from 'vue'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)
//或者
// set default config
VueCookies.config('7d')
//或者
// set global cookie
VueCookies.set('theme','default');
VueCookies.set('hover-time','1s');
语法格式: [this | Vue | window].$cookies.[method]
$cookies.config(expireTimes[,path]) // default: expireTimes = 1d , path=/
$cookies.set(keyName, value[, expireTimes[, path[, domain[, secure]]]]) //返回 this
$cookies.get(keyName) // 返回 value
$cookies.remove(keyName [, path [, domain]]) // 返回 this
$cookies.isKey(keyName) // 返回 false or true
this.$cookies.keys() // 返回 a array
全局配置
// 30天后到期
this.$cookies.config('30d')
this.$cookies.config(new Date(2019,03,13).toUTCString())
// 30天后到期, '' 当前路径 , 浏览器默认值
this.$cookies.config(60 * 60 * 24 * 30,'');
// window 对象
window.$cookies.config('30d')
支持JSON对象
var user = { id:1, name:'Journal',session:'25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX' };
this.$cookies.set('user',user);
// 打印用户名
console.log(this.$cookies.get('user').name)
设置过期时间
假设当前时间是:Sat, 11 Mar 2017 12:25:57 GMT
遵循等效原则 / Following equivalence:1天后到期
链式写法
// 默认过期时间:1天
this.$cookies.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX")
// 数值 +d , 忽略大小写
.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX","1d")
.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX","1D")
// 转换秒
.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX",60 * 60 * 24)
// 输入一个日期, +1天
.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX", new Date(2017, 03, 12))
// 输入一个日期字符串, +1天
.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX", "Sat, 13 Mar 2017 12:25:57 GMT")
设置过期时间,输入数字类型
this.$cookies.set("default_unit_second","input_value",1); // 1秒后过期
this.$cookies.set("default_unit_second","input_value",60 + 30); // 1分钟30秒后过期
this.$cookies.set("default_unit_second","input_value",60 * 60 * 12); // 12小时后到期
this.$cookies.set("default_unit_second","input_value",60 * 60 * 24 * 30); // 1个月后到期
浏览器窗口关闭后过期
this.$cookies.set("default_unit_second","input_value",0); // 浏览器窗口关闭 - 用 0 或 "0"!
设置过期时间,输入字符串类型
时间 | 代码 |
---|---|
年 | y |
月 | m |
日 | d |
时 | h |
分 | min |
秒 | s |
代码忽略大小写 | 不支持组合 | 不支持小数
this.$cookies.set("token","GH1.1.1689020474.1484362313","60s"); // 60秒后到期
this.$cookies.set("token","GH1.1.1689020474.1484362313","30MIN"); // 30分钟后过期,忽略大小写
this.$cookies.set("token","GH1.1.1689020474.1484362313","24d"); // 24天后到期
this.$cookies.set("token","GH1.1.1689020474.1484362313","4m"); // 4个月后到期
this.$cookies.set("token","GH1.1.1689020474.1484362313","16h"); // 16小时后到期
this.$cookies.set("token","GH1.1.1689020474.1484362313","3y"); // 3年后到期
//输入日期字符串
this.$cookies.set('token',"GH1.1.1689020474.1484362313", new Date(2017,3,13).toUTCString());
this.$cookies.set("token","GH1.1.1689020474.1484362313", "Sat, 13 Mar 2017 12:25:57 GMT ");
设置到期支持日期 / set expire support date
var date = new Date;
date.setDate(date.getDate() + 1);
this.$cookies.set("token","GH1.1.1689020474.1484362313", date);
设置永不过期
this.$cookies.set("token","GH1.1.1689020474.1484362313", Infinity); // 永不过期
// 永不过期,只有-1,其他负数无效
this.$cookies.set("token","GH1.1.1689020474.1484362313", -1);
设置其他参数
// 设置路径
this.$cookies.set("use_path_argument","value","1d","/app");
// 设置域名
this.$cookies.set("use_path_argument","value",null, null, "domain.com"); // 默认1天后到期
// 设置安全
this.$cookies.set("use_path_argument","value",null, null, null,true);
其他操作
// 检查是否存在cookie
this.$cookies.isKey("token")
// 过去cookie
this.$cookies.get("token");
// 删除cookie
this.$cookies.remove("token");
// 获取所有cookie名, 一行显示
this.$cookies.keys().join("\n");
// vue-cookies 全局
[this | Vue | window].$cookies.[函数]
$cookies键名不能设置为['expires','max-age','path','domain','secure']
vue-cookies没有依赖性,它可以独立存在,对vue.js友好
window.$cookies.get
window.$cookies.set
window.$cookies.isKey
window.$cookies.remove
window.$cookies.keys
官方地址:https://www.npmjs.com/package/vue-cookies