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 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
jquery实现页面加载效果
Feb 21 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
微信小程序 Storage更新详解
Jul 16 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
jquery 新浪网易的评论块制作
2010/07/01 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
node 版本切换的实现
2020/02/02 Javascript
Python实现的rsa加密算法详解
2018/01/24 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
Python3标准库总结
2019/02/19 Python
Python 控制终端输出文字的实例
2019/07/12 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
2016中考冲刺决心书
2015/09/22 职场文书
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang
JS数组去重详情
2021/11/07 Javascript