vue-cookies官方教程汉化

安装

1. script引用

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-cookies@1.5.12/vue-cookies.js"></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');

Api

语法格式: [this | Vue | window].$cookies.[method]

• 全局配置

$cookies.config(expireTimes[,path])  // default: expireTimes = 1d , path=/

• 设置cookie

$cookies.set(keyName, value[, expireTimes[, path[, domain[, secure]]]])   //返回 this

• 获取cookie

$cookies.get(keyName)  // 返回 value

• 删除cookie

$cookies.remove(keyName [, path [, domain]])  // 返回 this

• 查看一个cookie是否存在：

$cookies.isKey(keyName)  // 返回 false or true

• 获取所有cookie名称：

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']

解释 / explain

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