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存在路徑，必須在同一個路徑下才能讀取到內容