zoukankan      html  css  js  c++  java
  • 【原创】js中利用cookie实现记住密码功能

    在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下:

    1 HttpServletRequest request  
    2 HttpServletResponse response
    3 Cookie username = new Cookie("username ","cookievalue");
    4 Cookie password = new Cookie("password ","cookievalue");
    5 response.addCookie(username );
    6 response.addCookie(password );

    但是为安全起见,我们在后台获取的密码大多是在js中通过MD5加密后的密文,如果将密文放到cookie中,在js中获取到也没有作用;

    然后考虑在js中存取cookie,代码如下:

     1 //设置cookie
     2 var passKey = '4c05c54d952b11e691d76c0b843ea7f9';
     3 function setCookie(cname, cvalue, exdays) {
     4     var d = new Date();
     5     d.setTime(d.getTime() + (exdays*24*60*60*1000));
     6     var expires = "expires="+d.toUTCString();
     7     document.cookie = cname + "=" + encrypt(escape(cvalue), passKey) + "; " + expires;
     8 }
     9 //获取cookie
    10 function getCookie(cname) {
    11     var name = cname + "=";
    12     var ca = document.cookie.split(';');
    13     for(var i=0; i<ca.length; i++) {
    14         var c = ca[i];
    15         while (c.charAt(0)==' ') c = c.substring(1);
    16         if (c.indexOf(name) != -1){
    17           var cnameValue = unescape(c.substring(name.length, c.length));
    18           return decrypt(cnameValue, passKey);
    19         } 
    20     }
    21     return "";
    22 }
    23 //清除cookie  
    24 function clearCookie(cname) {  
    25     setCookie(cname, "", -1);  
    26 }

    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方法的调用:

    定义checkbox

    <input type="checkbox" id="rememberMe" checked="checked"/>记住密码

    存入cookie

    • 判断帐号密码无误后将用户名密码存入cookie
    1 if($('#rememberMe').is(':checked')){
    2             setCookie('customername', $('#username').val().trim(), 7)
    3             setCookie('customerpass', $('#password').val().trim(), 7)
    4           }

    自动填充

    • 进入登录界面后,判断cookie中是否有帐号密码,如果有就自动填充
    $(function(){
    
      //获取cookie
      var cusername = getCookie('customername');
      var cpassword = getCookie('customerpass');
      if(cusername != "" && cpassword != ""){
        $("#username").val(cusername);
        $("#password").val(cpassword);
      }
    }

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

    1 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,{}))
  • 相关阅读:
    IDF实验室-CTF训练营-牛刀小试CTF
    百度杯CTF夺旗大赛9月场writeup
    基于Mapxtreme for JAVA的电子地图设计与实现
    centos下 apache+mysql+php的安装
    ssh远程登陆
    毕业设计-JSP论文盲审系统
    Android毕业设计-微圈
    基于Android的高校饮水宝app
    小程序不支持wx.request同步请求解决方法
    微信小程序服务类目大坑:特殊行业服务类目所需资质材料
  • 原文地址:https://www.cnblogs.com/lujiulong/p/5985031.html
Copyright © 2011-2022 走看看