前言
Cookie技术是客户端的解决方案，Cookie就是由服务器发给客户端的特殊信息，而这些信息以文本文件的方式存放在客户端，然后客户端每次向服务器发送请求的时候都会带上这些特殊的信息。
我本人开发时比较懒，很少整理零零碎碎的东西，导致我用到什么某些功能都去百度。都懒得记（坏习惯....）。所以 。。它来了！虽然没有眼前一亮的技术，能给前端小伙伴一点点参考。感觉就够了。
方案一
// cookie.js
function setCookie(name,value,timer=1){//默认将被保存 1 天
var Days = timer;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape(value) +";expires="+ exp.toGMTString();
}
//name 需要获取cookie的key
function getCookie(name){
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null){
return unescape(arr[2])
}else{
return null
}
}
// 需要删除cookie的key
function clearCookie(name){
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null) document.cookie=name +"="+cval+";expires="+exp.toGMTString();
}
export default {
setCookie,
getCookie,
clearCookie
}
使用。。。。。。
// 在main.js 引入即可
import cookie from './cookie.js'
Vue.prototype.cookie= cookie;
方案二
使用插件 vue-cookies 安装
npm install vue-cookies --save
引入。。。。
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)
使用。。。
//不写过期时间，默认为1天过期
this.$cookies.set("token","123456")
// 1天过期，忽略大小写
this.$cookies.set("token","12346","1d")
this.$cookies.set("token","123456","1D")
// 以秒为单位，设置1天过去
this.$cookies.set("token","123456",60 * 60 * 24)
// 填写Date对象，明确指定过期时间
this.$cookies.set("token","123456", new Date(2020, 10, 01))
// 填写一个时间字符串，指定过期时间
this.$cookies.set("token","123456", "Sat, 13 Mar 2017 12:25:57 GMT")
//浏览器会话结束时过期
this.$cookies.set("token","input_value","0");
//永不过期
this.$cookies.set("token","input_value",-1);
其他设置时间方法。。
this.$cookies.set("token","123456","60s"); // 60秒后过去
this.$cookies.set("token","123456","15MIN"); // 15分钟后过去
this.$cookies.set("token","123456","30d"); // 24天后过期
this.$cookies.set("token","123456","45"); // 45个月后过期
this.$cookies.set("token","123456","15h"); // 15小时后过期
this.$cookies.set("token","123456","3y"); // 3年后过期
全局设置。。。
// 15天后过期
this.$cookies.config('15d')
this.$cookies.config(new Date(2020,09,20).toUTCString())
this.$cookies.config(60 * 60 * 24 * 15,'');
// window object
window.$cookies.config('15d')
一些方法。。
检查某个 cookie name是否存在
this.$cookies.isKey(keyName)
删除cookie
this.$cookies.remove(keyName [, path [, domain]])
获取所有 cookie name，以数组形式返回
this.$cookies.keys()
获取cookie
this.$cookies.get(keyName)
其他
// set path
this.$cookies.set("token","value","1d","/app");
// set domain
this.$cookies.set("token","value",null, null, "domain.com");
// set secure
this.$cookies.set("token","value",null, null, null,true);
关于 跨域共享cookie的方法
1、设置 cookie 时明确指定 domain 域名，子域名可读取（子域共享该cookie），删除时则也必须明确指定域名，否则无法删除。
2、设置 cookie 时不指定域名，使用默认值，则表示 只有当前域名可见（子域不可共享）。删除时也不需要指定域名，否则无法删除。
当cookie的path设置了值不为null的时候，以设置的值为准。当cookie的path为null时候，获取请求的URI的path值
当URI的path值是以“/”结尾的时候，直接设置为cookie的path值
当URI的path值不是以“/”结尾的时候，查看path里面是否有“/”
如果有“/”的话，直接截取到最后一个“/”，然后设置为cookie的path值。
如果没有“/”的话，将cookie的path设置为”/”。
