cookie、vue-cookie、js-cookie

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

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

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

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

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) 
 //10秒后删除
this.$cookies.set('test', '{a:1,b:2}','10s') 
//2019年10月13日删除，new Date月份设置是从0开始的
this.$cookies.set('test', '{a:1,b:2}',new Date(2019,9,13).toUTCString())  

cookie的获取

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

cookie的删除

 this.$cookies.remove(keyName)

支持判断本地是否有此cookie

this.$cookies.isKey(keyName)  

获取本地所有cookie的名称

this.$cookies.keys() 

/*******************************************************************************************************************/

三、js-cookie

s-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');

设置删除时间

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

获取cookie

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

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

this.$cookie.get(); 

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

删除cookie

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