Vue实现记住密码功能cookies

1.设置表单相关的值

data中数据赋值

html相关

2.js写入

cookies相关函数设置

//设置cookie

    setCookie(c_name, c_pwd, exdays) {

      var exdate = new Date(); //获取时间

      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数

      //字符串拼接cookie

      window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();

      window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();

    },

    //读取cookie

    getCookie: function() {

      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') {

            this.username = arr2[1]; //保存到保存数据的地方

          } else if (arr2[0] == 'userPwd') {

            this.password = arr2[1];

          }

        }

      }

    },

    //清除cookie

    clearCookie: function() {

      this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了

    }

3.调用

mounted() {

    this.getCookie();

  },

  methods: {

    async handleLogin() {

      let data = await User.Login({

        username: this.username,

        password: this.password,

      });

      console.log( "data:", data );

      if ( data && data.status == 1 ){

        this.$router.push({

          path: "/home",

          query: { username: this.username },

        });

        if ( this.checked == true ) {

          console.log( "checked == true" );

          //传入账号名，密码，和保存天数3个参数

          this.setCookie(this.username, this.password, 7);

        }else {

          console.log("清空Cookie");

          //清空Cookie

          this.clearCookie();

        }

      } else {

        this.$message.error({

          message: '账号密码错误！请重新输入',

          center: true

        });

        this.username = '',

        this.password = '',

        this.checked = false

      }

    },