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 相关文章推荐
基于jquery的获取浏览器窗口大小的代码
Mar 28 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
基于Jquery实现键盘按键监听
May 11 Javascript
谷歌地图打不开的解决办法
Aug 07 Javascript
javascript初学者常用技巧
Sep 02 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
Underscore源码分析
Dec 30 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
EsLint入门学习教程
Feb 17 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
vue实现购物车功能(商品分类)
Apr 20 Javascript
javascript canvas实现简易时钟例子
Sep 05 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
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
javascript获取选中的文本的方法代码
2013/10/30 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
Python中的闭包详细介绍和实例
2014/11/21 Python
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
Python eval函数原理及用法解析
2020/11/14 Python
用python实现一个简单的验证码
2020/12/09 Python
python自动化办公操作PPT的实现
2021/02/05 Python
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
英国现代绅士品牌:Hackett
2017/12/17 全球购物
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
澳大利亚商务邀请函
2014/01/17 职场文书
12岁生日感言
2014/01/21 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
海飞丝的广告词
2014/03/20 职场文书
工程承包协议书
2014/10/20 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
颐和园的导游词
2015/01/30 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP