首頁 > web前端 > js教程 > 主體

js中利用cookie實作記住密碼功能

高洛峰
發布: 2016-12-09 13:23:56
原創
1516 人瀏覽過

在登入介面加入記住密碼功能,我首先想到的是在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,程式碼如下:

//设置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);
}
登入後複製
取得到也沒有作用;

然後考慮在js中存取cookie,程式碼如下:

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)
     }
登入後複製

   

setCookie(setCookie(setCookie(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

記住密碼後呼叫

2、判斷帳號密碼輸入無誤後號碼

$(function(){
 
 //获取cookie
 var cusername = getCookie(&#39;customername&#39;);
 var cpassword = getCookie(&#39;customerpass&#39;);
 if(cusername != "" && cpassword != ""){
  $("#username").val(cusername);
  $("#password").val(cpassword);
 }
}
登入後複製
   

3、進入登入介面後,判斷cookie中是否有帳號密碼,若有就自動填入

rrreee

  



🎜🎜
相關標籤:
js
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!