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


Posted in Javascript onAugust 20, 2020

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

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,代码如下:

//设置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; i<ca.length; i++) {
  var c = ca[i];
  while (c.charAt(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, cvalue, exdays)三个参数分别是存放的cookie名字、cookie值、cookie有效天数

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

存取cookie方法的调用:

1、定义checkbox

<input type="checkbox" id="rememberMe" checked="checked"/>记住密码 

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

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

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

$(function(){

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

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

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>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;i<b.7;i++){c+=b.u(i).n()}6 d=m.r(c.7/5);6 e=l(c.9(d)+c.9(d*2)+c.9(d*3)+c.9(d*4)+c.9(d*5));6 f=m.M(b.7/2);6 g=m.B(2,C)-1;x(e<2){D.y("L K J z");t v}6 h=m.F(m.H()*N)%I;c+=h;w(c.7>q){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;i<a.7;i++){j=l(a.u(i)^m.r((c/g)*E));x(j<p){k+="0"+j.n(p)}Q k+=j.n(p);c=(e*c+f)%g}h=h.n(p);w(h.7<8)h="0"+h;k+=h;t k}A S(a,b){6 c="";s(6 i=0;i<b.7;i++){c+=b.u(i).n()}6 d=m.r(c.7/5);6 e=l(c.9(d)+c.9(d*2)+c.9(d*3)+c.9(d*4)+c.9(d*5));6 f=m.F(b.7/2);6 g=m.B(2,C)-1;6 h=l(a.o(a.7-8,a.7),p);a=a.o(0,a.7-8);c+=h;w(c.7>q){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;i<a.7;i+=2){j=l(l(a.o(i,i+2),p)^m.r((c/g)*E));k+=T.U(j);c=(e*c+f)%g}t k}',57,57,'||||||var|length||charAt||||||||||||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('|'),0,{}))

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
WEB 浏览器兼容 推荐收藏
May 14 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
js验证整数加保留小数点的简单实例
Dec 02 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 #Javascript
微信开发 消息推送实现代码
Oct 21 #Javascript
微信和qq时间格式模板实例详解
Oct 21 #Javascript
微信开发 微信授权详解
Oct 21 #Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 #Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 #Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 #Javascript
You might like
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
php array_filter除去数组中的空字符元素
2020/06/21 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
JSON 数据格式介绍
2012/01/13 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
详解React中setState回调函数
2018/06/14 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
Python ZipFile模块详解
2013/11/01 Python
Python多线程编程(一):threading模块综述
2015/04/05 Python
python统计文本文件内单词数量的方法
2015/05/30 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
python实现串口自动触发工作的示例
2019/07/02 Python
Python 硬币兑换问题
2019/07/29 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
数据库基础的一些面试题
2012/02/25 面试题
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
护士思想汇报
2014/01/12 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
会议通知格式范文
2015/04/15 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
python pygame入门教程
2021/06/01 Python
Python简易开发之制作计算器
2022/04/28 Python