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" οnclick="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="" οnclick="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,并且有效时间为天。
用户登录成功后加入这段代码
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存在路径,必须在同一个路径下才能读取到内容