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与asp.net(c#)互相调用方法
Dec 13 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 Javascript
javascript递归回溯法解八皇后问题
Apr 22 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 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将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
原生js实现分页效果
2020/09/23 Javascript
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
采购部部门职责
2013/12/15 职场文书
行政专员岗位职责
2014/01/02 职场文书
酒店led欢迎词
2014/01/09 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
家长会主持词开场白
2014/03/18 职场文书
学习之星事迹材料
2014/05/17 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
CSS极坐标的实例代码
2021/06/03 HTML / CSS
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server
移除Selenium中window.navigator.webdriver值
2022/06/10 Python