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 相关文章推荐
默认让页面的第一个控件选中的javascript代码
Dec 26 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
基于游标的分页接口实现代码示例
Nov 12 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 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防注入及开发安全详细解析
2013/08/09 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
javascript获取当前ip的代码
2009/05/10 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
python的即时标记项目练习笔记
2014/09/18 Python
Numpy掩码式数组详解
2018/04/17 Python
python线程中同步锁详解
2018/04/27 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
幼儿园实习自我鉴定
2013/12/15 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
面试通知短信
2015/04/20 职场文书
酒店宣传语大全
2015/07/13 职场文书
Go 语言结构实例分析
2021/07/04 Golang
python处理json数据文件
2022/04/11 Python
详解CSS3浏览器兼容
2022/12/24 HTML / CSS