How to use cookies in JavaScript to implement the password remembering function and an introduction to cookie-related functions-JS Tutorial-php.cn

How to use cookies in JavaScript to implement the password remembering function and an introduction to cookie-related functions

高洛峰

Release： 2016-12-07 11:35:43

Original

1675 people have browsed it

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 );

Copy after login

但是为安全起见，我们在后台获取的密码大多是在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; iCopy after login

由于cookie中不能包含等号、空格、分号等特殊字符，我在设置cookie时使用escape() 函数对字符串进行编码，获取cookie时使用unescape()函数解码。但是escape()函数不会对 ASCII 字母和数字进行编码，所以存放到cookie中的账号、密码是以明文存放的，不安全。于是上网找了一个对字符串加密解密算法，该算法需要传两个参数，一个需要加密的字符串，一个自定义加密密钥passKey。设置cookie时使用encrypt(value, passkey)加密，读取cookie时使用decrypt(value, passKey)解密，该算法附在本文最后。

存取cookie方法的调用：

1、定义checkbox

记住密码

Copy after login

2、判断帐号密码输入无误后调用

if($('#rememberMe').is(':checked')){
setCookie('customername', $('#username').val().trim(), 7)
setCookie('customerpass', $('#password').val().trim(), 7)
}

Copy after login

3、进入登录界面后，判断cookie中是否有帐号密码，如果有就自动填充

$(function(){
//获取cookie
var cusername = getCookie('customername');
var cpassword = getCookie('customerpass');
if(cusername != "" && cpassword != ""){
$("#username").val(cusername);
$("#password").val(cpassword);
}
}

Copy after login

最后附上字符串加密解密算法

eval(function(p,a,c,k,e,r){e=function(c){return(c35?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;iq){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;iq){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;iCopy after login

PS:下面看下js操作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();
 }
}

Copy after login