jQuery cookie 实现记住用户名和密码功能

jQuery cookie 实现记住用户名和密码功能

HTML代码

<div class="wrap">
        <div class="line-top"></div>
        <div class="line-right"></div>
        <div class="line-bottom"></div>
        <div class="line-left"></div>
        <div class="keyboard"></div>
        <div class="box">
            <div class="title">
                <div class="logo"></div>
                <h1>森林防火信息管理系统</h1>
            </div>
            <div class="user">
                <div class="txt">
                    <i class="iconfont username"></i><label for="">用户名：</label>
                </div>
                <div class="input">
                    <input type="text" class="username" placeholder="请输入用户名" name="userName" id="userName" value="">
                </div>
            </div>
            <div class="pwd">
                <div class="txt">
                    <i class="iconfont password"></i><label for="">密<i style="width:1em"></i>码：</label>
                </div>
                <div class="input">
                    <input type="password" class="password" placeholder="请输入密码" name="passWord" id="passWord" value="">
                </div>
            </div>
            <div class="login">
                <input type="button" tabindex="1" id="btn-login" onclick="login.erification()" value="登录">
                <div class="verif">
                    <input type="text" id="txt_code" placeholder="验证码">
                    <div class="verification"><img style="margin-top:13px;" id="imgyzm" /></div>
                </div>
            </div>
            <div class="reme-key">
                <input type="checkbox" name="" onclick="cookierRmemberPassword()" id="remember-password"><label for="remember-password">记住密码</label>
            </div>
        </div>
    </div>

　

JS功能代码

function rememberPassword() {
    //存储变量
    this.username = $('#userName').val();
    this.password = $('#passWord').val();
    this.cookie;
    if (!!$.cookie('user')) {
        this.cookie = eval($.cookie('user'));
    } else {
        $.cookie('user', '[]');
        this.cookie = eval($.cookie('user'));
    };
}
rememberPassword.prototype = {
    cookieInit: function() { //初始化
        var temp = this.cookie,
            username = this.username,
            start = false;
        console.log(temp);
        if (temp.length > 0) {
            $.each(temp, function(i, item) {
                if (item.first == true) {
                    $('#userName').val(item.username);
                    $('#passWord').val(item.password);
                    $('#remember-password').attr('checked', true)
                }
            });
        }
        $('#userName').blur(function() {
            console.log('失去焦点');
            //检查是否存在该用户名,存在则赋值，不存在则不做任何操作
            $.each(temp, function(i, item) {
                if (item.username == $('#userName').val()) {
                    $('#userName').val(item.username);
                    $('#passWord').val(item.password);
                    $('#remember-password').attr('checked', true)
                    start = true;
                    return false;
                } else {
                    $('#passWord').val('');
                }

            });
        });
    },
    //记住密码
    cookieRemeber: function() {
        var temp = this.cookie,
            username = this.username,
            password = this.password,
            start = false;
        //检测用户是否存在
        $.each(temp, function(i, item) {
            if (item.username == username) {
                //记录最后一次是谁登录的
                item.first = true;
                $('#passWord').val(item.password);
                start = true;
                return;
            } else {
                item.first = false;
            }
        });
        //不存在就把用户名及密码保存到cookie中
        if (!start) {
            temp.push({
                username: username,
                password: password,
                first: true
            });
        }
        //存储到cookie中
        $.cookie('user', JSON.stringify(temp));
    },
    //删除密码
    cookieDelete: function() {
        var temp = this.cookie,
            username = this.username,
            num = 0;
        //检测用户是否存在
        $.each(temp, function(i, item) {
            if (item.username === username) {
                num = i;
            }
        });
        //删除里面的密码
        temp.splice(num, 1);
        //存储到cookie中
        $.cookie('user', JSON.stringify(temp));
    }
}

 

用户登录成功后加入这段代码

if ($('#remember-password').attr('checked')) {
    var cookie = new rememberPassword();
    cookie.cookieRemeber();
}

 

初始化代码

 

$(document).ready(function () {
    //移除密码
    $('#remember-password').click(function () {
        if (!$('#remember-password').attr('checked')) {
            var cookie = new rememberPassword();
            cookie.cookieDelete();
        }
    });
    //cookie记住密码
    var cookie = new rememberPassword();
    cookie.cookieInit();
});

　　

注意：如果站点有登录登出功能，切记登出路劲与登录路劲一模一样，因为cookie存在路径，必须在同一个路径下才能读取到内容