Home > Web Front-end > JS Tutorial > How to use cookies in JavaScript to implement the password remembering function and an introduction to cookie-related functions

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
1783 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; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==&#39; &#39;) 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有效天数
Copy after login

由于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"/>记住密码
Copy after login

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

if($(&#39;#rememberMe&#39;).is(&#39;:checked&#39;)){
setCookie(&#39;customername&#39;, $(&#39;#username&#39;).val().trim(), 7)
setCookie(&#39;customerpass&#39;, $(&#39;#password&#39;).val().trim(), 7)
}
Copy after login

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

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

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

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?&#39;&#39;:e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!&#39;&#39;.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return&#39;\\w+&#39;};c=1};while(c--)if(k[c])p=p.replace(new RegExp(&#39;\\b&#39;+e(c)+&#39;\\b&#39;,&#39;g&#39;),k[c]);return p}(&#39;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}&#39;,57,57,&#39;||||||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&#39;.split(&#39;|&#39;),0,{}))
Copy 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

   


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template