碼上歡樂
相關內容    簡體    繁體

通過jquery.cookie.js實現記住用戶名、密碼登錄功能

本文轉載自   查看原文   2018-08-22 17:32   973 
  1. <!doctype html>
  2.  
    <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
    <head>
  4.  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  
    <title>無標題文檔 </title>
  6.  
    <script src="jquery-1.8.3.min.js"> </script>
  7.  
    <script src="jquery.cookie.js"> </script>
  8.  
    <script src="jquery.base64.js"> </script>
  9.  
     
  10.  
    <script language="javascript" type="text/javascript">
  11.  
    function setCookie(){ //設置cookie
  12.  
    var loginCode = $( "#login_code").val(); //獲取用戶名信息
  13.  
    var pwd = $( "#login_password").val(); //獲取登陸密碼信息
  14.  
    var checked = $( "[name='checkbox']:checked"); //獲取“是否記住密碼”復選框
  15.  
     
  16.  
    if(checked){ //判斷是否選中了“記住密碼”復選框
  17.  
    $.cookie( "login_code",loginCode); //調用jquery.cookie.js中的方法設置cookie中的用戶名
  18.  
    $.cookie( "pwd",$.base64.encode(pwd)); //調用jquery.cookie.js中的方法設置cookie中的登陸密碼，並使用base64（jquery.base64.js）進行加密
  19.  
    } else{
  20.  
    $.cookie( "pwd", null);
  21.  
    }
  22.  
    }
  23.  
    function getCookie(){ //獲取cookie
  24.  
    var loginCode = $.cookie( "login_code"); //獲取cookie中的用戶名
  25.  
    var pwd = $.cookie( "pwd"); //獲取cookie中的登陸密碼
  26.  
    if(pwd){ //密碼存在的話把“記住用戶名和密碼”復選框勾選住
  27.  
    $( "[name='checkbox']").attr( "checked", "true");
  28.  
    }
  29.  
    if(loginCode){ //用戶名存在的話把用戶名填充到用戶名文本框
  30.  
    $( "#login_code").val(loginCode);
  31.  
    }
  32.  
    if(pwd){ //密碼存在的話把密碼填充到密碼文本框
  33.  
    $( "#login_password").val($.base64.decode(pwd));
  34.  
    }
  35.  
    }
  36.  
    function login(){
  37.  
    var userName = $( '#login_code').value;
  38.  
    if(userName == ''){
  39.  
    alert( "請輸入用戶名。");
  40.  
    return;
  41.  
    }
  42.  
    var userPass = $( '#login_password').value;
  43.  
    if(userPass == ''){
  44.  
    alert( "請輸入密碼。");
  45.  
    return;
  46.  
    }
  47.  
    //判斷是否選中復選框，如果選中，添加cookie
  48.  
    if($( "[name='checkbox']").attr( "checked", "true")){
  49.  
    //添加cookie
  50.  
    setCookie();
  51.  
    alert( "記住密碼登錄。");
  52.  
    window.location = "http://www.baidu.com";
  53.  
    } else{
  54.  
    alert( "不記密碼登錄。");
  55.  
    window.location = "http://www.baidu.com";
  56.  
    }
  57.  
    }
  58.  
    </script>
  59.  
    </head>
  60.  
    <body onload="getCookie();">
  61.  
    <center>
  62.  
    <table width="400px" height="180px" cellpadding="0" cellspacing="0" border="1" style="margin-top:100px;">
  63.  
    <tr>
  64.  
    <td align="center" colspan="2">歡迎登錄 </td>
  65.  
    </tr>
  66.  
    <tr>
  67.  
    <td align="right">
  68.  
    <label>用戶名： </label>
  69.  
    </td>
  70.  
    <td align="left">
  71.  
    <input type="text" id="login_code" name="login_code" style="width:160px; margin-left:10px;" />
  72.  
    </td>
  73.  
    </tr>
  74.  
    <tr>
  75.  
    <td align="right">
  76.  
    <label>密 碼： </label>
  77.  
    </td>
  78.  
    <td align="left">
  79.  
    <input type="password" id="login_password" name="login_password" style="width:160px; margin-left:10px;" />
  80.  
    </td>
  81.  
    </tr>
  82.  
    <tr>
  83.  
    <td align="center" colspan="2">
  84.  
    <span style="font-size:12px; color:blue; vertical-align:middle;">是否記住密碼 </span>
  85.  
    <input type="checkbox" style="vertical-align:middle;" />
  86.  
    </td>
  87.  
    </tr>
  88.  
    <tr>
  89.  
    <td align="center" colspan="2">
  90.  
    <input type="submit" id="subLogin" name="subLogin" value="登 錄" onclick="login();"/>
  91.  
    </td>
  92.  
    </tr>
  93.  
    </table>
  94.  
    </center>
  95.  
    </body>
  96.  
    </html>

 

  1. <!doctype html>
  2.  
    <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
    <head>
  4.  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  
    <title>無標題文檔 </title>
  6.  
    <script src="jquery-1.8.3.min.js"> </script>
  7.  
    <script src="jquery.cookie.js"> </script>
  8.  
    <script src="jquery.base64.js"> </script>
  9.  
     
  10.  
    <script language="javascript" type="text/javascript">
  11.  
    function setCookie(){ //設置cookie
  12.  
    var loginCode = $( "#login_code").val(); //獲取用戶名信息
  13.  
    var pwd = $( "#login_password").val(); //獲取登陸密碼信息
  14.  
    var checked = $( "[name='checkbox']:checked"); //獲取“是否記住密碼”復選框
  15.  
     
  16.  
    if(checked){ //判斷是否選中了“記住密碼”復選框
  17.  
    $.cookie( "login_code",loginCode); //調用jquery.cookie.js中的方法設置cookie中的用戶名
  18.  
    $.cookie( "pwd",$.base64.encode(pwd)); //調用jquery.cookie.js中的方法設置cookie中的登陸密碼，並使用base64（jquery.base64.js）進行加密
  19.  
    } else{
  20.  
    $.cookie( "pwd", null);
  21.  
    }
  22.  
    }
  23.  
    function getCookie(){ //獲取cookie
  24.  
    var loginCode = $.cookie( "login_code"); //獲取cookie中的用戶名
  25.  
    var pwd = $.cookie( "pwd"); //獲取cookie中的登陸密碼
  26.  
    if(pwd){ //密碼存在的話把“記住用戶名和密碼”復選框勾選住
  27.  
    $( "[name='checkbox']").attr( "checked", "true");
  28.  
    }
  29.  
    if(loginCode){ //用戶名存在的話把用戶名填充到用戶名文本框
  30.  
    $( "#login_code").val(loginCode);
  31.  
    }
  32.  
    if(pwd){ //密碼存在的話把密碼填充到密碼文本框
  33.  
    $( "#login_password").val($.base64.decode(pwd));
  34.  
    }
  35.  
    }
  36.  
    function login(){
  37.  
    var userName = $( '#login_code').value;
  38.  
    if(userName == ''){
  39.  
    alert( "請輸入用戶名。");
  40.  
    return;
  41.  
    }
  42.  
    var userPass = $( '#login_password').value;
  43.  
    if(userPass == ''){
  44.  
    alert( "請輸入密碼。");
  45.  
    return;
  46.  
    }
  47.  
    //判斷是否選中復選框，如果選中，添加cookie
  48.  
    if($( "[name='checkbox']").attr( "checked", "true")){
  49.  
    //添加cookie
  50.  
    setCookie();
  51.  
    alert( "記住密碼登錄。");
  52.  
    window.location = "http://www.baidu.com";
  53.  
    } else{
  54.  
    alert( "不記密碼登錄。");
  55.  
    window.location = "http://www.baidu.com";
  56.  
    }
  57.  
    }
  58.  
    </script>
  59.  
    </head>
  60.  
    <body onload="getCookie();">
  61.  
    <center>
  62.  
    <table width="400px" height="180px" cellpadding="0" cellspacing="0" border="1" style="margin-top:100px;">
  63.  
    <tr>
  64.  
    <td align="center" colspan="2">歡迎登錄 </td>
  65.  
    </tr>
  66.  
    <tr>
  67.  
    <td align="right">
  68.  
    <label>用戶名： </label>
  69.  
    </td>
  70.  
    <td align="left">
  71.  
    <input type="text" id="login_code" name="login_code" style="width:160px; margin-left:10px;" />
  72.  
    </td>
  73.  
    </tr>
  74.  
    <tr>
  75.  
    <td align="right">
  76.  
    <label>密 碼： </label>
  77.  
    </td>
  78.  
    <td align="left">
  79.  
    <input type="password" id="login_password" name="login_password" style="width:160px; margin-left:10px;" />
  80.  
    </td>
  81.  
    </tr>
  82.  
    <tr>
  83.  
    <td align="center" colspan="2">
  84.  
    <span style="font-size:12px; color:blue; vertical-align:middle;">是否記住密碼 </span>
  85.  
    <input type="checkbox" style="vertical-align:middle;" />
  86.  
    </td>
  87.  
    </tr>
  88.  
    <tr>
  89.  
    <td align="center" colspan="2">
  90.  
    <input type="submit" id="subLogin" name="subLogin" value="登 錄" onclick="login();"/>
  91.  
    </td>
  92.  
    </tr>
  93.  
    </table>
  94.  
    </center>
  95.  
    </body>
  96.  
    </html>


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 通過jquery.cookie.js實現記住用戶名、密碼登錄功能 Java：Cookie實現記住用戶名、密碼 JS中記住用戶名 密碼的COOKIE實現方式 讓Git記住用戶名和密碼 [No00008F]PLSQL自動登錄，記住用戶名密碼&日常使用技巧 TortoiseGit自動記住用戶名密碼的方法 vscode設置git記住用戶名和密碼 TortoiseGit自動記住用戶名密碼的方法 git配置記住用戶名和密碼 防止瀏覽器記住用戶名及密碼的簡單實用方法
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM