5.记住登录用户名和密码

样式

实现步骤

注意要安装插件 js-cookie

npm i js-cookie

引入

import Cookies from 'js-cookie'

html中样式，使用 element-ui

<el-checkbox v-model="remember">记住密码</el-checkbox>

data中定义变量

remember: false,
rememberId: 'XjbLoginRemember',
NameId: 'XjbLoginName',
PwdId: 'XjbLoginPwd'

mounted方法中

mounted() {
    this.remember = Cookies.get(this.rememberId) === 'true';
    if(this.remember) {
        this.inputName = Cookies.get(this.NameId);
        this.inputPw = Cookies.get(this.PwdId);
    }
}

登录按钮方法commit中

// 记住密码
if(this.remember) {
    Cookies.set(this.rememberId, true);
    Cookies.set(this.NameId, this.inputName);
    Cookies.set(this.PwdId, this.inputPw)
}
else {
    Cookies.remove(this.rememberId);
    Cookies.remove(this.NameId);
    Cookies.remove(this.NameId);
}