cookie、vue-cookie、js-cookie
⼀、cookie是存储在客户端浏览器的⼀段⽂本信息
vue json字符串转数组 1.⼤⼩限制在4KB
2.⼀个⽹站的cookie数量在50条左右
3.存⼊cookie有⼀定的风险
4.可以设置有效期，默认的为会话结束
5.⼀般路径为根⽬录
6.可以设置域名
7可以设置secure，通过https访问（secure属性：当设置为true时，表⽰创建的 Cookie 会被以安全的形式向服务器传输，也就是只能在 HTTPS 连接中被浏览器传递到服务器端进⾏会话验证，如果是 HTTP 连接则不会传递该信息，所以不会被窃取到Cookie 的具体内容。）
cookie的完整格式
kie = 'name=vlaue;expires=⽇期对象;path=/;domain=域名;secure;
cookie的原⽣封装：
1function createCookie(key,value,expires){
2var cookieText = encodeURIComponent(key) + '=' + encodeURIComponent(value) + ';path=/';
3if(!isNaN(expires)){
4var date = new Date();
5 date.Date() + expires);
6 cookieText += ';expires=' + date;
7 }
8 kie = cookieText;
9 }
10function getCookie(key){
11var arr = kie.split('; ');
12for(var i = 0,len = arr.length;i < len;i ++){
13var list = arr[i].split('=');
14if(encodeURIComponent(key) === list[0]){
15return decodeURIComponent(list[1]);
16 }
17 }
18 }
19function removeCookie(key){
20 kie = encodeURIComponent(key) + '=;path=/;expires=' + new Date(0);
21 }
⼆、vue-cookie
npm下载到项⽬
npm i vue-cookies -D
下载到vue项⽬后，创建新的cookie.js⽂件在⽂件中写⼊
import Vue from 'Vue'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)
然后在main.js中引⽤
1 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()
1this.$cookies.set('test', '{a:1,b:2}',-1) //永不删除
3this.$cookies.set('test', '{a:1,b:2}',60) //⼀分钟后删除
5this.$cookies.set('test', '{a:1,b:2}','10s') //10秒后删除
7this.$cookies.set('test', '{a:1,b:2}',new Date(2019,9,13).toUTCString()) //2019年10⽉13⽇删除，new Date⽉份设置是从0开始的
cookie的获取
1this.$(keyName) //KeyName就是设置的cookie的名字，vue-cookie会将cookie⾃动转为json对象格式
cookie的删除
1this.$ve(keyName)
⽀持判断本地是否有此cookie
1this.$cookies.isKey(keyName)
获取本地所有cookie的名称
1this.$cookies.keys()
三、js-cookie
npm下载命令
1 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.$('name'); //将会得到名为name的纯字符串值
this.$JSON('name'); //将会得到⼀个json格式的对象数据
this.$();
this.$JSON(); //如果没有键名将会获取所有的cookie
删除cookie
1this.$ve('name');
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论