前言

之前在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() //獲取所有cookie
Cookies.get('name') //獲取指定cookie
//刪除
Cookies.remove('name')