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值，又能更好的管理代码，避免过多的全局变量引起意外的问题。