Cookie的设置与清除

关于cookie的设置

众所周知JS存储一共有三种方式

Cookie

  Cookie的优点是体积小，大小限制为4KB左右，主要用途保存登录信息。

localStorage

  localStorage是HTML5的客户端存储持久化数据的方案；localstorage永久存储，不过期，除非手动删除。

sessionStorage

  sessionStorage与localStorage的接口类似，但在保存数据的生命周期与localStorage不同。Session的直译是“会话”。他会将一部分数据在当前会话中保存下来，在重启浏览器、关闭页面或新开页面时失效

这篇文章着重讲在Vue项目中Cookie的设置

1. 在登录页面添加Cookie事件

   登录

2. 设置Cookie

    setCookie: function(cname, cvalue, exdays) {
      var d = new Date();
      d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
      var expires = "expires=" + d.toUTCString();
      console.info(cname + "=" + cvalue + "; " + expires);
      document.cookie = cname + "=" + cvalue + "; " + expires;
      console.info(document.cookie);
    }

3. 获取Cookie

 getCookie: function(cname) {
      var name = cname + "=";
      var ca = document.cookie.split(";");
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == " ") c = c.substring(1);
        if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
      }
      return "";
    }

4. 在登录成功后调用设置Cookie方法,这里默认清除cookie为16小时。

 let userName = this.$refs.userName.value;
      let password = this.$refs.password.value;
      let day=1;
      let objdata = {};
      objdata.userName = userName;
      objdata.password = password;
      this.setCookie("userInfo", JSON.stringify(objdata), day);