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 ui resizable bug解决方法
Oct 26 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
js实现3d悬浮效果
Feb 16 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 Javascript
解决antd Form 表单校验方法无响应的问题
Oct 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
php采集时被封ip的解决方法
2010/08/29 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
js压缩利器
2007/02/20 Javascript
js 格式化时间日期函数小结
2010/03/20 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
js的Object.assign用法示例分析
2020/03/05 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
python实现简单ftp客户端的方法
2015/06/28 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
Python实现的快速排序算法详解
2017/08/01 Python
Python 文件操作的详解及实例
2017/09/18 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
python实现代码统计器
2019/09/19 Python
python可以用哪些数据库
2020/06/22 Python
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
英语故事演讲稿
2014/04/29 职场文书
新文化运动的基本口号
2014/06/21 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS