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));

        //持久化储存写法，解决浏览器关闭不储存的情况

       $.cookie('user', JSON.stringify(temp), { expires: 7 }); //注：当指明时间时，故称为持久cookie，并且有效时间为天。},//删除密码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的js文件<script src="/js/jquery.cookie.js"></script>注意：如果站点有登录登出功能，切记登出路劲与登录路劲一模一样，因为cookie存在路径，必须在同一个路径下才能读取到内容