js中利用cookie实现记住密码功能

登录界面添加记住密码功能,我首先想到的是在java后台调用cookie存放账号密码,大致如下:

rush:js;"> HttpServletRequest request HttpServletResponse response Cookie username = new Cookie("username ","cookievalue"); Cookie password = new Cookie("password ","cookievalue"); response.addCookie(username ); response.addCookie(password );

但是为安全起见,我们在后台获取的密码大多是在js中通过MD5加密后的密文,如果将密文放到cookie中,在js中获取到也没有作用;

然后考虑在js中存取cookie,代码如下:

rush:js;"> //设置cookie var passKey = '4c05c54d952b11e691d76c0b843ea7f9'; function setCookie(cname,cvalue,exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = "expires="+d.toUTCString(); document.cookie = cname + "=" + encrypt(escape(cvalue),passKey) + "; " + expires; } //获取cookie function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; iarat(0)==' ') c = c.substring(1); if (c.indexOf(name) != -1){ var cnameValue = unescape(c.substring(name.length,c.length)); return decrypt(cnameValue,passKey); } } return ""; } //清除cookie function clearCookie(cname) { setCookie(cname,"",-1); }

setCookie(cname,exdays)三个参数分别是存放的cookie名字、cookie值、cookie有效天数

由于cookie中不能包含等号、空格、分号等特殊字符,我在设置cookie时使用escape() 函数对字符串进行编码,获取cookie时使用unescape()函数解码。但是escape()函数不会对 ASCII 字母和数字进行编码,所以存放到cookie中的账号、密码是以明文存放的,不安全。于是上网找了一个对字符串加密解密算法,该算法需要传两个参数,一个需要加密的字符串,一个自定义加密密钥passKey。设置cookie时使用encrypt(value,passkey)加密,读取cookie时使用decrypt(value,passKey)解密,该算法附在本文最后。

存取cookie方法调用

1、定义checkBox

Box" id="rememberMe" checked="checked"/>记住密码

2、判断帐号密码输入无误后调用

rush:js;"> if($('#rememberMe').is(':checked')){ setCookie('customername',$('#username').val().trim(),7) setCookie('customerpass',$('#password').val().trim(),7) }

3、进入登录界面后,判断cookie中是否有帐号密码,如果有就自动填充

rush:js;"> $(function(){

//获取cookie
var cusername = getCookie('customername');
var cpassword = getCookie('customerpass');
if(cusername != "" && cpassword != ""){
$("#username").val(cusername);
$("#password").val(cpassword);
}
}

最后附上字符串加密解密算法

代码如下:
35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('A G(a,b){x(b==v||b.7<=0){D.y("z R P O");t v}6 c="";s(6 i=0;iq){c=(l(c.o(0,q))+l(c.o(q,c.7))).n()}c=(e*c+f)%g;6 j="";6 k="";s(6 i=0;iq){c=(l(c.o(0,c.7))).n()}c=(e*c+f)%g;6 j="";6 k="";s(6 i=0;iarat||||||||||||parseInt|Math|toString|substring|16|10|floor|for|return|charCodeAt|null|while|if|log|key|function|pow|31|console|255|round|encrypt|random|100000000|the|change|pleSAE|ceil|1000000000|empty|be|else|cannot|decrypt|String|fromCharCode'.split('|'),{}))

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...