• vue记住密码功能


    话不多说,直接上代码。

    html部分:

    JS部分:

    data() {
    return {
    logining: false,
    ruleForm2: {
    account: '',
    checkPass: ''
    },
    rules2: {
    account: [
    {required: true, message: '请输入账号', trigger: 'blur'},
    ],
    checkPass: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    ]
    },
    checked: true,
    msg:''
    };
    },
    methods: {
    handleSubmit2(formName) {
    let self = this;
    //判断复选框是否被勾选 勾选则调用配置cookie方法
    if (self.checked == true) {
    //传入账号名,密码,和保存天数3个参数
    self.setCookie(self.ruleForm2.account, self.ruleForm2.checkPass, 7);
    }else {
    //清空Cookie
    self.clearCookie();
    }

            //设置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.ruleForm2.account = arr2[1]; //保存到保存数据的地方
                        } else if (arr2[0] == 'userPwd') {
                            this.ruleForm2.checkPass = arr2[1];
                        }
                    }
                }
            },
            //清除cookie
            clearCookie: function() {
                this.setCookie("", "", -1); //修改2值都为空,天数为负1天就好了
            }
    
        },
        mounted(){
            this.getCookie();
        }
    }
  • 相关阅读:
    Java面向对象(继承、抽象类)
    Java面向对象(类、封装)
    Java基础语法(Eclipse)
    JavaScript new对象的四个过程
    原生js实现深复制
    es6 实现双链表
    快速排序
    跨域问题
    pm2 使用
    js冒泡排序
  • 原文地址:https://www.cnblogs.com/JaniceDong/p/10183123.html
Copyright © 2020-2023  润新知