通过jquery.cookie.js实现记住用户名、密码登录功能

  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>
posted @ 2018-08-22 17:32  飞蚊  阅读(1482)  评论(0)  编辑  收藏  举报