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 相关文章推荐
js 页面传参数时 参数值含特殊字符的问题
Dec 13 Javascript
HTML颜色选择器实现代码
Nov 23 Javascript
jquery cookie的用法总结
Nov 18 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
基于JQuery实现页面定时弹出广告
May 08 jQuery
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转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
使用AngularJS 应用访问 Android 手机的图片库
2015/03/24 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
Python标准库之循环器(itertools)介绍
2014/11/25 Python
浅析Python四种数据类型
2018/09/26 Python
Python如何实现邮件功能
2020/05/27 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
销售员个人求职的自我评价
2014/02/10 职场文书
行政工作个人的自我评价
2014/02/13 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
小学亲子活动总结
2014/07/01 职场文书
户籍证明模板
2014/09/28 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL