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