前言
之前在Django中分享了后台如何来设置COOKIE的：Django实战006：COOKIE设置及跨域问题处理，那么如果我们想在前端设置COOKIE又该怎么来处理呢，今天为大家分享一篇vue中创建、读取、删除COOKIE的方法，希望对大家有所帮助。
COOKIE的形式
COOKIE和localStorage的有点不同，localStorage可以看作一个对象，通过键直接获取到对应的值，而COOKIE则是一串字符串，以=号区分键值，所以COOKIE在设置和获取时都无法直接实现。
//localStorage//设置方式localStorage.setItem('test1',value1) //展现形式为对象{ 'test1':'value1'， 'test2':'value2}//获取方式this.ip=localStorage.getItem('test1')//COOKIE//设置方式document.COOKIE='test1=value1';//展现形式为字符串"test1=value1 ; test2=value2";//获取方式document.COOKIE
封装COOKIE方法
使用 document.COOKIE 属性来创建 、读取、及删除 COOKIE，为了能快速的处理COOKIE，我们将其常用的方法封装起来，比如设置，获取和删除。这里我们只要在使用的时候直接调用该方法即可快速实现对COOKIE的处理。
创建COOKIE
COOKIE是一串字符串，每个属性之间用‘；’隔开，属性间以‘=’号为区分，类型格式如 COOKIE1=value; COOKIE2=value; COOKIE3=value;所以这里我们要做的就是将用户输入的对应参数按照COOKIE的类型格式进行拼接。COOKIE中共包含9个参数，分别是Name、Value、Domain、Path（默认‘/’）、Expires/Max-Age、Size（COOKIE大小）、HTTP、Secure、SameSite。设置COOKIE必须包含Nane和Value，其他的允许为空，一般我们会多添加个Expires/Max-Age超时限制。
setCOOKIE(name,value,expire){ let d=new Date() //实例化Date d.setDate(d.getDate()+expire) //设置超时时间 window.document.COOKIE = name + "=" + value +';expires='+d.toGMTString() },
读取COOKIE
读取COOKIE则是要将刚才拼接的字符串进行分割，并拿到我们想要的数据，多个COOKIE或者参数之间用‘；’隔开，所以我们用一个数据通过split(‘;’)分割并存储起来，然后去遍历这个数组中的每组数据，找到我们想要的数据并提出出‘=’号后面的值即可，你也可以用正则来提取你想要的值 。
//方法一getCOOKIE(name){ var arry =document.COOKIE.split(';') console.log("arry=",arry) for(let i=0;i<arry.length;i++){ let temp =arry[i].trim().split('=') if(temp.indexOf(name)==0) return temp[temp.indexOf(name)+1] } return null},//方法二，正则getCOOKIE(name){ var temp = document.COOKIE.match('(^|;) ?' + name + '=([^;]*)(;|$)') return temp ? temp[2] : null},
删除COOKIE
删除COOKIE我们只要再次调用创建COOKIE方法将对应的值清空即可，这里的-1让指定名为name的COOKIE过期实现自动清除，如果不赋值-1的话只是将对应的COOKIE值删除了，这条COOKIE记录并没有被删除。
delCOOKIE(name){ this.setCOOKIE(name,'',-1)},
js-COOKIE插件
以上是我们自己封装定义的COOKIE方法，如果你觉得麻烦也可以用别人的插件，如js-COOKIE，一款JS操作COOKIE的轻量级插件，直接命令行安装插件：npm i js-COOKIE –save，当前版本2.2.1。
js-COOKIE使用
在组件中引入js-COOKIE，通过set、get、remove等方法来实现对应的创建、获取、删除等功能，用起来还是相当的简单快捷的。
//引入import COOKIEs from 'js-COOKIE'//创建COOKIEs.set('name',value)COOKIEs.set('name', 'value', { expires: number });//获取COOKIEs.get() //获取所有COOKIECOOKIEs.get('name') //获取指定COOKIE//删除COOKIEs.remove('name')
欢迎关注本人的公众号：编程手札，文章也会在公众号更新
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。E-MAIL:dandanxi6@qq.com
