码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2018-08-22 18:24:08      阅读：222      评论：0      收藏：0      [点我收藏+]

标签：list   meta   输入   onclick   body   java   utf-8   www.   lis   

  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>

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

标签：list   meta   输入   onclick   body   java   utf-8   www.   lis   

原文地址：https://www.cnblogs.com/feiwenstyle/p/9519144.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！