今天我们整理下前端记住密码的功能

2020年4月3日，疫情已经持续很久我也很久没有空更新文章，看到有朋友留言关于vue中使用ocx，参考我的文章还是遇到很多问题，因为我本人只是偶尔觉得某一个功能或方法或问题值得记录我才会打开简书，所以很多时候不能很及时的回答大家的提问。我的简介里有我个人邮箱，如需一起探讨可以通过邮件方式，我想我应该是个比较懒的作者。
今天我要聊的是我们普遍的一个功能就是记住密码，虽然是个很简单很普遍的功能，但其实在我工作的过程中并没有很用心的去处理过。网上跟我的很多应该都是大同小异的，仅供参考。
新建一个cookie.ts：

class Cookie {
  setCookie(name: string, pwd: string | number, exDays: number) {
    const exDate: any = new Date(); //获取时间
    exDate.setTime(exDate.getTime() + 24 * 60 * 60 * 1000 * exDays); //保存的天数
    //字符串拼接cookie
    window.document.cookie =
      'userName' + '=' + name + ';path=/;expires=' + exDate.toGMTString();
    window.document.cookie =
      'userPwd' + '=' + pwd + ';path=/;expires=' + exDate.toGMTString();
  }
  getCookie() {
    const user:any = {};
    if (document.cookie.length > 0) {
      var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
      for (var i = 0; i < arr.length; i++) {
        var arr2 = arr[i].split('='); //再次切割
        //判断查找相对应的值
        if (arr2[0] == 'userName') {
          user.userName = arr2[1]; //保存到保存数据的地方
        } else if (arr2[0] == 'userPwd') {
          user.pwd = arr2[1];
        }
      }
      return user;
    }
  }
}

export const rememberCookie = new Cookie();

在需要的登录页面引入该文件，在选择记住密码的登录的时候进行rememberCookie.setCookie(name,pwd,365);(这里记住一年)
在登录页面的mounted函数中进行处理

mounted(){
  const cookie: any = rememberCookie.getCookie();
    if (cookie&&cookie.userName) {
      this.checked = true;
      //这里进行登录中表单赋值
    } else {
       //这里进行登录中表单数据赋空
    }
}