登录界面记住密码之jquery.cookie.js和md5.js

最近做了个登录界面，要实现记住密码效果，然而看似很简单，做起来略复杂。我就在不断改进中，有如下成果，如果可以优化，或有什么问题，可以评论留言。

首先，需下载jquery.cookie.js，和md5.js。

介绍一下这两个js文件，jquery.cookie.js 是提供了一些创建cookie的API接口的js文件，也可以自己写，md5.js是用来对密码进行MD5方式的加密。

再介绍下cookie.js的一般方法：

cookie保存在客户端，保存方式类似于text，且以键值对的形式保存，即key->value。

创建cookie

$.cookie(键名,值,保存时长) //保存时长的写法为{expires:number,path:'/'},expires是要保存的天数，path是保存的路径，一般为'/'。

删除cookie，只用将天数设为-1即可。

取cookie的值

$.cookie(键名) //返回字符串类型的键名所对应的值。

本次所用的md5.js 只有32位加密，而我修改了md5.js 的功能，使他能进行16位加密，所以方法改为$.md5(xxx,16)，如果没有对js文件进行修改，其方法为$.md5(xxx);

在上代码前，须有几点强调，首先，加有cookie功能的代码需在本地服务器上实现，干瘪瘪的html是无法实现cookie的功能。

其次，必须下对正确的jquery.cookie.js。

再次，如果想实时查看cookie的内容，建议用Firefox浏览器，因为有较简单查询cookie的方法

最后，md5.js 只是更好地与数据库交互，在前端就对密码加密，你可以使用数据库的加密方法实现。

特别说明的是，记住密码功能不一定由cookie实现，可以使用html5的localstorage来实现。

<body>

</body>

$(document).ready(function() {
//将获取的值填充入输入框中
var lastUser = $.cookie('Last'); //获取cookie中其键名为Last对应的值
var Isre = document.getElementById("Remember");
var userId = $('#Username');
var code = $('#PSD');
if (lastUser != undefined) { //如果对应的键有值，则填充到登录框中，作出响应
userId.val($.cookie("UN" + lastUser));
code.val("****"); //应把键名取得特别点，防止跟其他的cookie冲突，要保证名字的唯一性
Isre.checked = true;
} else {
userId.val(""); //否则输入框内容为空
}
});

function IsReset() { //重置函数，so easy 不做说明
$('#Username').val("");
$('#PSD').val("");
document.getElementById("Remember").checked = false;
}

function immediately() { //立即操作，如果不想登录记住的用户，意图对用户名修改，则会调用此函数
var element = document.getElementById("Username");
if ("\v" == "v") { //验证所用的浏览器是否为IE，如果是则用IE特有的方法添加监听事件
element.onpropertychange = webChange;
} else {
element.addEventListener("input", webChange, false); //一般浏览器添加监听事件的方法，将方法webChange与id="Username"的输入框绑定
} //当状态改变时，则调用webChange90()

function webChange() {
var user = $("#Username").val();
var mdcode = $.cookie("PSD" + user);
var code = $("#PSD");
var Isrem = document.getElementById("Remember");
if (mdcode != undefined&&mdcode!="") { //因为密码经md5加密，不能全部显示到登录框中，所以cookie中记住的密码显示在框中的是****
code.val("****"); //而不是真正的密码和加密后的密码
Isrem.checked = true;
} else { //如果cookie中没有相应的信息，未匹配成功，则密码输入框为空
code.val("");
Isrem.checked = false;
}
}
}
immediately();

function login() {
//异常判断...

var renewcode=$.md5(psd,16);

$.cookie("IR" + username, 'true', { expires: 7, path: '/' });
$.cookie("UN" + username, username, { expires: 7, path: '/' });
//取密码框中的数据，如果是****则说明cookie中有值，不相同的就存储新的。
if (psd == "****")
{

$.cookie("PSD" + username, mycode, { expires: 7, path: '/' });

json = '{"USERNAME": "' + username + '", "PSD": "' +mycode+'" }';

}
else
{

$.cookie("PSD" + username, renewcode, { expires: 7, path: '/' });

json = '{"USERNAME": "' + username + '", "PSD": "' +renewcode +'" }';

}
$.cookie("LAST", username, { expires: 7, path: '/' });
} else
if (Isre.checked == true&& $.cookie("IR" + username)==undefined) {//如果记住密码的checked为真，且是新用户则继续存储用户名和密码，

//大家可以细细体会为什么要与上面分开写
$.cookie("LAST", username, { expires: 7, path: '/' }); //LAST记住的是最近登入的用户名
$.cookie("IR" + username, 'true', { expires: 7, path: '/' }); //IR记住的是username是否在cookie中
$.cookie("UN" + username, username, { expires: 7, path: '/' });//UN记住的是用户名
$.cookie("PSD" + username, $.md5(psd,16), { expires: 7, path: '/' });//PSD记住的是加密后的密码

} else

if(Isre.checked==false&&$.cookie("IR" + username)) //将原有最近的记住的密码取消记住

{

json = '{"USERNAME": "' + username + '", "PSD": "' +$.cookie("PSD"+username) +'" }';
if (username == $.cookie('LAST')) //如果LAST对应的值被登录即最近登录的账号且未点击checkbox，则将cookie中对应user的信息删除
$.cookie('LAST', '', { expire: -1, path: '/' }); //我没有想到更好的办法解决找最近登录的上一个登录的账号
$.cookie("IR" + username, '', { expires: -1, path: '/' });
$.cookie("UN" + username, '', { expires: -1, path: '/' });
$.cookie("PSD" + username, '', { expires: -1, path: '/' });
}else //新密码且不记住

{ json = '{"USERNAME": "' + username + '", "PSD": "' +$.md5(psd)+'" }'; }

//与数据库连接验证代码，不给出
}
}

</script>

登录界面记住密码之jquery.cookie.js和md5.js

猜你喜欢