npm鏈接：https://www.npmjs.com/package/vue-cookies
下附源碼
引入 vue-cookies
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)
$cookies.config() 設(shè)置默認值
$cookies.config(expireTimes, path)
expireTimes 默認1d
path 默認'/'。 注意：// 哈希模式下：域名/projectName/#/aaaa 默認為 '/projectName'白魂。 域名/projectName#/aaaa 默認為 '/'汽纤。確認 #號前面是否有'/'。
$cookies.set()
$cookies.set(key, value[, expireTimes[, path[, domain[, secure]]]])
- key: cookie名
注意 $cookies key names Cannot be set to ['expires', 'max-age', 'path', 'domain', 'secure']- value: cookie值
vue-cookie會自動幫你把對象轉(zhuǎn)為json if (value && value.constructor === Object ){value = JSON.stringify(value)}- expireTimes: cookie有效時間福荸，默認時間為1d
可以為到期時間點(expire=) [Date]冒版，也可以為有效時間段單位s(max-age=)[Number]，傳入Infinity||-1被認該cookie永久有效逞姿，傳入0 會被判斷為false導(dǎo)致取默認值辞嗡，傳入非-1 的負數(shù)會立即刪除該cookie。傳入String類型但又不會被正則匹配的('0'滞造、'abc'续室、'Session')則關(guān)閉瀏覽器的時候銷毀cookie(Expire/Max-Age=Session)，效果類似Session谒养。- path: cookie所在目錄挺狰，默認 '/' 根目錄
設(shè)置path: '/projectName'指定項目名下'/projectName'使用- domain: cookie所在的域，默認為請求地址
- secure: Secure屬性是說如果一個cookie被設(shè)置了Secure=true买窟，那么這個cookie只能用https協(xié)議發(fā)送給服務(wù)器丰泊，用http協(xié)議不發(fā)送。
$cookies.get('key')
$cookies.get(key) // return value
$cookies.remove('key')
$cookies.remove(key [, path [, domain]]) // return false or true , warning： next version return this始绍； use isKey(key) return true/false,please
是否有key cookie
$cookies.isKey(key) // return true or false
列出所有cookie
$cookies.keys() // return ['key', 'key', ......]
源碼
/**
* Vue Cookies v1.5.7
* https://github.com/cmp-cc/vue-cookies
*
* Copyright 2016, cmp-cc
* Released under the MIT license
*/
(function() {
var defaultConfig = {
expires : '1d',
path : '; path=/'
}
var VueCookies = {
// install of Vue
install: function(Vue) {
Vue.prototype.$cookies = this
Vue.cookies = this
},
config : function(expireTimes,path) {
if(expireTimes) {
defaultConfig.expires = expireTimes;
}
if(path === '') {
defaultConfig.path = '';
}else {
defaultConfig.path = '; path=' + path;
}
},
get: function(key) {
var value = decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(key).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null
if(value && value.startsWith("{") && value.endsWith("}")) {
try {
value = JSON.parse(value)
}catch (e) {
return value;
}
}
return value;
},
set: function(key, value, expireTimes, path, domain, secure) {
if (!key) {
throw new Error("cookie name is not find in first argument")
}else if(/^(?:expires|max\-age|path|domain|secure)$/i.test(key)){
throw new Error("cookie key name illegality ,Cannot be set to ['expires','max-age','path','domain','secure']\t","current key name: "+key);
}
// support json object
if(value && value.constructor === Object ) {
value = JSON.stringify(value);
}
var _expires = "; max-age=86400"; // temp value, default expire time for 1 day
expireTimes = expireTimes || defaultConfig.expires;
if (expireTimes) {
switch (expireTimes.constructor) {
case Number:
if(expireTimes === Infinity || expireTimes === -1) _expires = "; expires=Fri, 31 Dec 9999 23:59:59 GMT";
else _expires = "; max-age=" + expireTimes;
break;
case String:
if (/^(?:\d{1,}(y|m|d|h|min|s))$/i.test(expireTimes)) {
// get capture number group
var _expireTime = expireTimes.replace(/^(\d{1,})(?:y|m|d|h|min|s)$/i, "$1");
// get capture type group , to lower case
switch (expireTimes.replace(/^(?:\d{1,})(y|m|d|h|min|s)$/i, "$1").toLowerCase()) {
// Frequency sorting
case 'm': _expires = "; max-age=" + +_expireTime * 2592000; break; // 60 * 60 * 24 * 30
case 'd': _expires = "; max-age=" + +_expireTime * 86400; break; // 60 * 60 * 24
case 'h': _expires = "; max-age=" + +_expireTime * 3600; break; // 60 * 60
case 'min': _expires = "; max-age=" + +_expireTime * 60; break; // 60
case 's': _expires = "; max-age=" + _expireTime; break;
case 'y': _expires = "; max-age=" + +_expireTime * 31104000; break; // 60 * 60 * 24 * 30 * 12
default: new Error("unknown exception of 'set operation'");
}
} else {
_expires = "; expires=" + expireTimes;
}
break;
case Date:
_expires = "; expires=" + expireTimes.toUTCString();
break;
}
}
document.cookie = encodeURIComponent(key) + "=" + encodeURIComponent(value) + _expires + (domain ? "; domain=" + domain : "") + (path ? "; path=" + path : defaultConfig.path) + (secure ? "; secure" : "");
return this;
},
remove: function(key, path, domain) {
if (!key || !this.isKey(key)) {
return false;
}
document.cookie = encodeURIComponent(key) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (domain ? "; domain=" + domain : "") + (path ? "; path=" + path : defaultConfig.path);
return this;
},
isKey: function(key) {
return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(key).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
},
keys: function() {
if(!document.cookie) return [];
var _keys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
for (var _index = 0; _index < _keys.length; _index++) {
_keys[_index] = decodeURIComponent(_keys[_index]);
}
return _keys;
}
}
if (typeof exports == "object") {
module.exports = VueCookies;
} else if (typeof define == "function" && define.amd) {
define([], function() {
return VueCookies;
})
} else if (window.Vue) {
Vue.use(VueCookies);
}
// vue-cookies can exist independently,no dependencies library
if(typeof window!=="undefined"){
window.$cookies = VueCookies;
}
})()
