JavaScript 中利用 Cookie 实现记住密码功能

Cookie 记住密码方案概述

实现登录界面的记住密码功能，初始思路是在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时使用escape()函数对字符串编码，读取时使用unescape()函数解码。由于escape()不编码ASCII字母和数字，导致账号密码以明文形式存储，存在安全隐患。因此，采用一种需传入待加密字符串及自定义密钥passKey的加解密算法，设置Cookie时调用encrypt(value, passkey)，读取时调用decrypt(value, passKey)，该算法详见文末。

调用存取Cookie的方法示例：

1、定义复选框元素

<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,{}))

本文内容旨在为读者提供学习参考，欢迎继续支持本站。