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,代碼如下:
//設置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,{}))
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(); } }
以上所述是小編給大家介紹的JavaScript中如何使用cookie實現記住密碼功能及cookie相關函數介紹,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!