vue简单实现记住密码功能

原理是在提交表单的时候把用户名和密码的值存入cookie中然后再次进入页面时读取cookie

html部分

               

蚊子蚊子蚊子

               
                   

                       
                           
                       
                   

                   

                       
                           
                       
                   

                   

                        记住密码
                        忘记密码？
                   

               

               

                    注册新机构
                    登录
               

           

js部分

mounted(){
      this.getCookie();

  },

然后在methods中写如下函数

//设置cookie
    setCookie(c_name, c_pwd, exdays) {
        var exdate = new Date();
        exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
        document.cookie = "userName=" + c_name + ";path=/;expires=" + exdate.toLocaleString()
        document.cookie = "userPwd=" + c_pwd + ";path=/;expires=" + exdate.toLocaleString()
    },
    //获取cookie
    getCookie: function() {
        if (document.cookie.length > 0) {
            var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
            // console.log(arr)
            for (var i = 0; i < arr.length; i++) {
                var arr2 = arr[i].split('='); //再次切割
                //判断查找相对应的值
                if (arr2[0] == 'userName') {
                    this.username = arr2[1]; //保存到保存数据的地方
                } else if (arr2[0] == 'userPwd') {
                    this.password = arr2[1];
                }
            }
        }
    },
    //删除cookie
    clearCookie: function() {
        this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了

    },

login_submit(){
        //判断复选框是否被勾选 勾选则调用配置cookie方法
        if (this.password_ji == true) {
            console.log("checked == true");
            //传入账号名，密码，和保存天数3个参数
            this.setCookie(this.username, this.password, 7);
        }else {
          console.log("清空Cookie");
          //清空Cookie
          this.clearCookie();
        }
        
        //与后端请求代码，本功能不需要与后台交互所以省略
        
        console.log("登陆成功");
        

    },

备注：测试的时候如果是本地测试不要用chome浏览器，否则读取不了cookie因为httponly属性的原因