一日一手活（cookie中保存对象数据--vue项目实用）

起始逻辑

目前有一个发消息的功能，消息如果发送失败，需要把它调用发送失败接口。
但是问题是 如果能发送成功 那么一定能调取失败接口，发送不成功服务器问题，失败接口也调取不成功。
所以我们合计建议是这么做：
如果发送失败的话，把当前的调取接口内容保存到本地cookie，实时监听调用失败消息接口

发消息接口需要的对象里面参数有：附件数组、发送人id数组、标题、富文本内容
第一个问题 ：可以保存对象到cookie吗? 参数名怎么设置

// 处理
//vue data 中加个参数
errorSendMessage: {
        id:this.$store.state.app.userInfo.id, // id是当前登录用户的id
        errorMessage:{}
      }, // 点击发送时 对发送信息进行缓存

// cookie.js封装
/* 
* 设置cookie
* @params c_name key
* @params value value
* @params expiremMinutes 过期时间 单位：分钟
* @return null
*/
function setCookie(c_name, value, expiremMinutes) {
  var exdate = new Date();
  exdate.setTime(exdate.getTime() + expiremMinutes * 60 * 1000);
  document.cookie = c_name + "=" + escape(value) + ((expiremMinutes == null) ? "" : ";expires=" + exdate.toGMTString());
}
//escape对字符串编码函数

/* 
* 读取cookie
* @params c_name key
* @return value || ''
*/
function 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 ""
}

/* 
* 删除cookie
* @params c_name 
* @return null
*/
function delCookie(c_name) {
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(c_name);
  if (cval != null) {
    document.cookie = c_name + "=" + cval + ";expires=" + exp.toGMTString();
  }
}

export {
  setCookie,
  getCookie,
  delCookie
}

发消息页面接口调用

sendMessageApi(req){
      const fujian = this.addArr.map(item =>{ // 获取附件的参数
        return {
          fujianName:item.oldFileName,
          fujianUrl: item.url
        }
      })
      const receives = this.addressee.map(item =>{ // 获取收件人数组信息
        return {
          receiveId: item.id,
          receiveName: item.nickname,
          receiveImage: item.avatar
        }
      })
      let data ={
        title:this.title,
        content:this.content,
        receives,
        fujian,
      }

对上面的data进行保存到cookie中

// 对上面的data进行保存到cookie中
// 保存到cookie中的操作
      this.errorSendMessage.errorMessage = data // 只要点击发送按钮，就对发送的参数进行保存一下
      // 把this.errorSendMessage信息 保存到cookie中
      setCookie(this.errorSendMessage.id.toString(),JSON.stringify(this.errorSendMessage.errorMessage), 10080)
      console.log(getCookie(this.errorSendMessage.id.toString()))
      console.log(JSON.parse(getCookie(this.errorSendMessage.id.toString()))) // 获取cookie中我们保存的cookie信息

解释：
我们让当前用户登录的id做cookie的键 发消息所需要的参数对象转字符串做值
取数据需要用JSON.parse转回对象
这样做的好处是：
当前用户登录id不一致就不全局监听消息发送
就是万一用户发送失败了还退出登录了下次登录不是同一用户的问题处理

步骤2：怎么监听 控制参数是什么
1、在vue项目的全局app.vue中或者不会关闭的导航栏组件中定义计时器进行监听
2、根据当前登录的id查询是否存在当前登录id的cookie名，没有则不需要计时器

// data中设置
timeoutCookie: '',// cookie的计时器
// mounted 或created中进行设置定时器
mounted() {
    // 实时根据cookie中信息 进行监听是否有发送失败的消息
    if(getCookie(this.$store.state.app.userInfo.id)){ // 存在当前用户名id相同的cookie
       console.log('存在发送失败的消息')
      this.timeoutCookie = setInterval(()=>{
        console.log('监测失败消息是否需要发送到失败接口')
      // 调用接口
      // 调取接口成功 清除cookie和计时器
      delCookie(this.$store.state.app.userInfo.id)
      clearInterval(this.timeoutCookie)
      },3000)
    }
 destroyed() {// 当用户退出时关闭计时器
     clearInterval(this.timeoutCookie)
  },