Cookie的介绍与应用

        HTTP是无状态协议，不对之前发送过的请求和响应状态进行管理。加入一个需要登录的web页面，如果不对登录状态进行管理，那么每次跳转到一个新页面，都需要重新登录。为了解决这一问题，引入了cookie技术。

        Cookie通过在请求和响应的报文中写入状态信息，来控制客户端的状态。

        Cookie根据服务器端发送的响应报文中一个名叫Set-Cookie的首部字段，让客户端保存Cookie。当下次客户端再向服务器发送请求时，客户端会自动把Cookie加到请求报文中发送出去。服务器接受到Cookie信息后，会检查是从哪个客户端发来的信息，并与服务器上的记录对比，得到之前的状态信息。

-----------------------------------分割线---------------------------------

        今天在解决一个线上问题的时候，正好用到了cookie。

        问题是这样的，在一个vue项目中，由于产品的设计，在点击一级导航的时候，需要动态改变二级导航的数据。功能很好实现，but，当我刷新页面的时候一脸**，因为二级导航的数据在刷新后恢复到初始数据，导致导航不能正确显示。于是我在点击一级导航时，把对应的二级导航数据存到cookie中，再用cookie中的数据去渲染页面，完美解决了刷新后不能显示的问题。

        在写代码的时候，才知道cookie只能存字符串，不能存对象，所以需要对数据进行处理再存储，代码如下：

//subArr为需要存储的二级导航对象，先转换成json字符串再存储
document.cookie='subArr='+JSON.stringify(subArr);

getCookie(c_name){
    if (document.cookie.length>0){
      var c_start=document.cookie.indexOf(c_name + "=")
      if (c_start!=-1){
        c_start=c_start + c_name.length+1
        var c_end=document.cookie.indexOf(";",c_start)
        if (c_end==-1) c_end=document.cookie.length
        return unescape(document.cookie.substring(c_start,c_end))
        }
      }
    return ""
}
JSON.parse(this.getCookie('subArr'));    //获取到cookie后再把字符串转换成json对象