cookie操作

前端有時候需要操作cookie來完成一些需求。

比如最簡單的點擊列表頁的某一項，跳轉到詳情頁並顯示相應的詳細信息的需求。如果用vue來做的話，可以通過props來進行組件間的傳值，也可以通過vuex來管理。如果你用了elementui這種基於vue封裝好的組件庫，甚至都不需要你來操心傳值的事，elementui就幫你搞定了，你可以很方便的拿到列表項的id值與后端進行交互。

但是不可能所有項目都用vue來做，也不可能遇到一個需求就上vue。一個好的前端不僅僅需要能夠掌握最新的技術，也要能掌握好傳統的開發方式，這樣才能更好的完成工作。

就拿上面列舉的需求來說，我們可以通過cookie把列表項的id傳到詳情頁，然后在詳情頁把id傳給后端拿到相應的詳細信息展示出來。

首先是設置cookie。

所有的cookie信息都在document.cookie中存放着，是一個字符串，里面的cookie以分號和空格分隔。就像這樣：

"key1=value1; key2=value2; key3=value3"

我們可以這樣設置新的cookie

document.cookie = "id=" + value

其中的value就是你需要在詳情頁傳給后端的id值。

這樣的寫法，會把新的cookie添加到已有的cookie字符串中。而且如果你再像上面一樣設置一次"id=" + value2的話，id值將會是value2。

 

我們通過上面的方式設置了cookie之后，接下來要做的就是在詳情頁獲取到我們想要的值，具體思路是，以分號為分隔符，把放着所有cookie的字符串分隔成一個個元素放入一個數組中，然后循環遍歷這個數組，拿到我們想要的值，看代碼：

var myId;
var cookieArr = document.cookie.split(";");
for(var i = 0; i < cookieArr.length; i++){
  var cookie = cookieArr[i].trim().split("=");
  if(cookie[0]=="id"){
    myId = cookie[1];
  }      
}

這樣，我們就在詳情頁拿到了從列表頁傳過來的值。

如果不想聲明全局變量，那么我們可以把上面的代碼放入一個函數中，把id作為參數傳進去，把變量myId作為函數的返回值返回出來，這樣我們就技能靈活的獲取我們想要的cookie值，又能更好的管理代碼，避免過多的全局變量引起意外的問題。