cookie、vue-cookie、js-cookie

一、cookie是存储在客户端浏览器的一段文本信息

　　1.大小限制在4KB

　　2.一个网站的cookie数量在50条左右

　　3.存入cookie有一定的风险

　　4.可以设置有效期，默认的为会话结束

　　5.一般路径为根目录

　　6.可以设置域名

　　7可以设置secure，通过https访问（secure属性：当设置为true时，表示创建的 Cookie 会被以安全的形式向服务器传输，也就是只能在 HTTPS 连接中被浏览器传递到服务器端进行会话验证，如果是 HTTP 连接则不会传递该信息，所以不会被窃取到Cookie 的具体内容。）

cookie的完整格式

　　document.cookie = 'name=vlaue;expires=日期对象;path=/;domain=域名;secure;

cookie的原生封装：

function createCookie(key,value,expires){
        var cookieText = encodeURIComponent(key) + '=' + encodeURIComponent(value) + ';path=/';
        if(!isNaN(expires)){
            var date = new Date();
            date.setDate(date.getDate() + expires);
            cookieText += ';expires=' + date;
        }
        document.cookie = cookieText;
    }
    function getCookie(key){
        var arr = document.cookie.split('; ');
        for(var i = 0,len = arr.length;i < len;i ++){
            var list = arr[i].split('=');
            if(encodeURIComponent(key) === list[0]){
                return decodeURIComponent(list[1]);
            }
        }
    }
    function removeCookie(key){
        document.cookie = encodeURIComponent(key) + '=;path=/;expires=' + new Date(0);
    }

 

二、vue-cookie

vue-cookie是在别人封装好的cookie，通过npm下载引入进行使用，npm地址：https://www.npmjs.com/package/vue-cookies，

npm下载到项目

npm i vue-cookies -D

下载到vue项目后，创建新的cookie.js文件在文件中写入

 import Vue from 'Vue'
 import VueCookies from 'vue-cookies'
 Vue.use(VueCookies)

然后在main.js中引用

import './cookie.js'

这样就可以在各个组件中直接调用cookie

设置cookie

 this.$cookies.set(keyName, value,time,path,domain,secure)//KeyName是cookie的键，value是对应的值，time为何时自动删除，path为存放路径，domain为域名，secure为是否要以安全的方式传输

如果是一个简单的项目，一般只会用到前四项

this.$cookies.set('test', '{a:1,b:2}',0,'/')   //意思为创建一个名为 test 的cookie ，值为{a:1,b:2},时间为0，即会话结束就删除cookie，存放在根目录 / 下

vue-cookie的时间有以下几个格式

　　1.直接设置数字：0，1，-1。设置为0即会话结束就删除cookie，设置1即一秒后删除，设置-1即此cookie永不删除，60 + 30即为1分30秒后，60*60即为1小时后，1就代表一秒

　　2.设置为字符串，比如："1s"即为一秒后删除、"2min"就是两分钟、"3h"就是3个小时、"4d"就是4天、"5m"就是5个月、"6y"就是6年

　　3.也可以自定义设置时间 比如：new Date(2019,9,13).toUTCString()

 

this.$cookies.set('test', '{a:1,b:2}',-1)  //永不删除
 
this.$cookies.set('test', '{a:1,b:2}',60)  //一分钟后删除
 
this.$cookies.set('test', '{a:1,b:2}','10s')  //10秒后删除
 
this.$cookies.set('test', '{a:1,b:2}',new Date(2019,9,13).toUTCString())  //2019年10月13日删除，new Date月份设置是从0开始的

 

 

 

cookie的获取

this.$cookies.get(keyName)   //KeyName就是设置的cookie的名字，vue-cookie会将cookie自动转为json对象格式

cookie的删除

this.$cookies.remove(keyName)

支持判断本地是否有此cookie

this.$cookies.isKey(keyName)  

获取本地所有cookie的名称

this.$cookies.keys() 

 

三、js-cookie

js-cookie同样是npm中被人已经写好的cookie工具，npm地址：https://www.npmjs.com/package/js-cookie；

npm下载命令

cnpm i js-cookie -D

也可以在vue中使用，下面是在react中的使用

通过命令在react项目中下载成功后在main.js文件中引用

import jsCookie from 'js-cookie';

React.Component.prototype.$cookie = jsCookie;  //添加到原型，使每一个组件都可以使用

js-cookie的使用就很简单

设置cookie

this.$cookie.set('name', 'value');

设置删除时间

this.$cookie.set('name', 'value',{expires: 7, path: '/'});  //此时为7天后删除cookie，可以不设置，默认会话结束后自动删除cookie

获取cookie

this.$cookie.get('name');  //将会得到名为name的纯字符串值

this.$cookie.getJSON('name');   //将会得到一个json格式的对象数据

this.$cookie.get(); 

this.$cookie.getJSON();     //如果没有键名将会获取所有的cookie

删除cookie

this.$cookie.remove('name');