前言

之前在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=