JQ是个很好的JavaScript库,做前端的必备库之一,其开源的各种插件都非常多,今天要来说一下JQ的cookie插件,并且使用cookie实现自动登录的功能(不是记住密码功能)。
首先下载jq:http://jquery.com/
jq的cookie插件下载地址http://plugins.jquery.com/cookie/
获得了插件后,我们要先分析下要如何实现这个功能
分析:
1、用户填写用户名和密码,点击登录则创建一个相应的用户名及密码的cookie
2、用户在点击登录的时候,通过JQ获得表单中的用户名和密码
3、cookie创建好了以后,让表单自动记住用户名和密码(就是将cookie中的用户名和密码赋值给相应的表单)
4、模拟用户自动点击登录功能
有了以上的分析,我们就可以直接来写代码了
1、JSP页面,参考而已,如果需要自己写html请自行进行修改下面的JSP页面即可
<%--
Document : header1
Created on : 2016-7-6, 19:04:57
Author : Mr.Tao
--%>
<%@page contentType="text/html" pageEncoding="GB2312"%>
<%=Sitename%>
2、创建cookie,写一个函数
//cookie创建
function SaveCookie() {
if ($('input[name=ck_MNBUser]').is(':checked')) {//假如checkbox被选中
var str_name = $('input[name=username]').val();//获得表单名字为username的值
var str_pswd = $('input[name=password]').val();//获得表单名字为password的值
$.cookie('User', 'true', { expires: 7 }); //存储一个带7天期限的cookie
$.cookie('mz', str_name, { expires: 7 });
$.cookie('pwd', str_pswd, { expires: 7 });
}
else {//如果checkbox未选中则创建一个空的cookie
$.cookie('User', 'false', { expire: -1 });
$.cookie('mz', '', { expires: -1 });
$.cookie('pwd', '', { expires: -1 });
}
}
3、当用户点击登录按钮是触发SaveCookie(),创建相应的cookie值
$('input[name=Login_submit]').click(function(){
SaveCookie();
});
4、自动模拟点击登录功能
//自动读取用户名密码
if ($.cookie('MNBUser') == 'true') {
var MnbU=$.cookie('mz');
var MnbP=$.cookie('pwd');
//赋值给input
$('input[name=username]').val(MnbU);
$('input[name=password]').val(MnbP);
//判断cookie值是否为空
if(MnbU!='' || MnbP!='' || MnbU.length>0 || MnbP.length>0){
//$('input[name=ck_MNBUser]').attr('checked', true);
//自动登录无需再次选中checkbox,如果选中了,那么每次登录都会延长7天时间,如果用户天天登录,那么这个cookie就一直存在下去
//li.login_windows存在才执行模拟点击事件
if($('li').hasClass('login_windows')){
$('input[name=Login_submit]').trigger("click");//模拟点击使用.trigger("click")
}
}
}
注意:这只是一个简单的范例,cookies中已经保存了明文密码,对于网站来说肯定是不安全的,只要打开浏览器的cookie即可查看到明文的用户名和密码,建议大家使用cookie的来存储session的ID或者其他key,让服务器来自动匹配用户即可。