JS Cookie记住密码教程：setCookie/getCookie及加密算法实现

Cookie与记住密码功能概述

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存取实现

考虑到上述问题，我们转而尝试直接在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、定义复选框元素


<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 Cookie常用函数参考

补充说明：下面介绍一些JavaScript操作Cookie的常用相关函数


//设置cookie函数，三个参数，一个是cookie的名子，一个是值，一个是设置cookie保存时间，单位：天
function SetCookie(name,value,days){
 var days=arguments[2]?arguments[2]:30; //此 cookie 将被保存 30 天
 var exp=new Date(); //new Date("December 31, 9998");
 exp.setTime(exp.getTime() + days*86400000);
 document.cookie=name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//取cookies函数
function getCookie(name){
 var arr=document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
 if(arr!=null){
 return unescape(arr[2]);
 }
 return null;
}
//删除cookie函数
function delCookie(name){
 var exp = new Date();
 exp.setTime(exp.getTime() - 1);
 var cval=getCookie(name);
 if(cval!=null){
 document.cookie= name + "="+cval+";expires="+exp.toGMTString();
 }
}

以上内容介绍了如何在JavaScript中使用Cookie实现记住密码功能以及相关的Cookie操作函数，希望对大家有所帮助。如果大家有任何疑问，欢迎留言，小编会及时回复。在此也非常感谢大家对本站网站的支持！

JavaScript实现记住密码功能：Cookie操作与加密解密详解