vue简单实现记住密码功能

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

html部分

<div class="log_form">
                <div class="log_form_biao">蚊子蚊子蚊子</div>
                <div  class="log_form_inp">
                    <div>
                        <i-input type="text" v-model="username" placeholder="请输入用户名" id="user">
                            <Icon type="ios-person-outline" slot="prepend"></Icon>
                        </i-input>
                    </div>
                    <div>
                        <i-input type="text" v-model="password" placeholder="请输入密码" id="pswd">
                            <Icon type="ios-locked-outline" slot="prepend"></Icon>
                        </i-input>
                    </div>
                    <div>
                        <Checkbox v-model="password_ji" class="password_ji">记住密码</Checkbox>
                        <a href="./password_recovery.html" class="password_wji">忘记密码？</a>
                    </div>
                </div>
                <div>
                    <i-button type="warning" @click="registration">注册新机构</i-button>
                    <i-button type="success" class="login_bt" @click="login_submit">登录</i-button>
                </div>

            </div>

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属性的原因