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

最新推荐文章于 2019-03-08 15:48:03 发布
最新推荐文章于 2019-03-08 15:48:03 发布
阅读量70 收藏
点赞数
文章标签： 前端 javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/feiwenstyle/p/9519144.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>

 

  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>

转载于:https://www.cnblogs.com/feiwenstyle/p/9519144.html

weixin_33982670
关注
jquery.cookie.js操作cookie实现“记住密码”
12-02 850
//初始化页面时验证是否记住了密码 $(document).ready(function() { if ($.cookie("rmbUser") == "true") { $("#rmbUser").attr("checked", true); $("#user").val($.cookie("userName")); $("#pass").val($.cookie("passWord")); }
jquery.cookie.js实现cookie记住用户名和密码
diguyan7877的博客
12-23 123
　　记得导入 　　<script src="jquery.js" type="text/javascript"></script>　　<script src="jquery.cookie.js" type="text/javascript"></script> 　　先看表单里面的内容，有一个checkbox复选框 <form...
原生js记住密码
weixin_34259559的博客
11-14 65
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta htt...
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
12-11
本文将详细介绍如何使用`jquery.cookie.js`实现记住密码功能，并讲解其核心概念和用法。 首先，Cookie是一种存储在用户浏览器中的小型文本文件，用于在用户与网站交互时保存数据。它允许网站在用户下次访问时识别...
jquery.cookie.js实现用户登录保存密码功能的方法
10-22
使用`jquery.cookie.js`插件来实现用户登录时保存密码的功能，主要是通过操作浏览器的Cookie来实现。Cookie是一种在客户端存储少量数据的技术，它可以用来保存用户的登录状态或者偏好设置等信息。下面将详细解释如何...
使用cookie实现自动化测试中的自动登录
bangwu6488的博客
10-16 274
　　本文将详细介绍如何利用cookie，在自动化测试时实现自动登录功能。 　　我们将步骤主要分为以下几步： 在基类BaseDriver中封装读、写cookie的方法(主要看最后两个方法)； package com.hizuche.base; import org.openqa.selenium.By; import org.openqa.selenium.Cooki...
jquery.cookie.js操作cookie实现“记住密码”，很简单很强大
weixin_33975951的博客
11-30 81
//初始化页面时验证是否记住了密码 $(document).ready(function() { if ($.cookie("rmbUser") == "true") { $("#rmbUser").attr("checked", true); $("#user").val($.cookie("userName"));
js用cookie记住密码实例
04-23
js操作cookie，记住用户名，密码。
jquery.cookie.js 用法 jquery获取当前cookie
weixin_33728268的博客
01-07 207
获取当前登录用户COOKIE字符串JS获取方式&lt;head id="Head1" runat="server"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type='text/javascript' src='/j/jquery-1.7.2.min.js'&gt;&lt;/script&gt; &lt;script
Cookie实战项目2 记住用户名密码 使用jQuery.Cookie.js 就是这么简单！！！
wenteryan的博客
04-15 1083
记住用户名密码 使用jQuery.Cookie.js 就是这么简单！！！ 本次实战巩固jQuery.Cookie.js的使用。你会发现咋这么简单呢！！！！ 先看效果图打开页面填写数据，勾上记住密码刷新页面（奇迹出现了吧！！！！）源代码1.引入js文件<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> <sc
jquery 实现密码框的显示隐藏 js
fengzhishangsky的专栏
09-18 2741
$(function(){ $("#chk").bind({ click: function(){ if($(this).attr("checked")){ $("#passwd2").val($("#passwd").val()); $("#passwd").hide(); $("#passwd2").sh
Servlet实现Cookie自动登录，并显示保存的用户信息
weixin_34111819的博客
10-11 374
转自：https://blog.csdn.net/qq_29612963/article/details/51100565 转载于:https://www.cnblogs.com/sharpest/p/5948439.html
Cookie.js实现保存用户名和密码操作(四)
热门推荐
两个蝴蝶飞
03-08 1万+
前端表单记住用户名和密码(一) 在登录页面的时候，常常设置记住用户名和密码。虽说，可以用服务器端利用cookies进行记住密码。但最好还是在前端进行相关的记住密码。 一 利用cookie.js进行记住密码 在plugins文件夹下，放置cookie.js,和jquery.js。 二 在前端界面进行相关的引用. &amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;amp;gt; &a
通过jquery.js传递用户名和密码漏洞
最新发布
08-11
通过jquery.js传递用户名和密码是存在漏洞的。因为jquery.js是一个客户端脚本库，它的主要功能是对HTML文档进行操作和处理。在使用jquery.js传递用户名和密码时，如果没有采取适当的安全措施，可能会导致敏感信息泄露和安全漏洞的产生。 首先，jquery.js是一个开放源代码的库，所有的代码都是公开的。这就意味着任何人都可以查看和分析其中的代码。如果在传递用户名和密码的过程中没有进行合适的加密和处理，那么攻击者可能会通过查看jquery.js的代码来获取用户的敏感信息。 其次，jquery.js是在客户端运行的，这意味着用户可以直接访问和编辑它。如果在jquery.js中直接将用户名和密码明文传递给服务器，那么用户可以很容易地通过修改jquery.js的代码来修改传递的内容，例如将用户名和密码发送给其他服务器或保存在本地。 为了避免通过jquery.js传递用户名和密码的漏洞，我们可以采取以下措施： 1. 使用HTTPS协议传输数据，确保数据在传输过程中进行了加密，防止中间人攻击和数据被窃取。 2. 对传递的用户名和密码进行加密处理，可以使用哈希算法或者其他加密算法将明文的用户名和密码转换成密文，以增加攻击者的难度。 3. 在服务器端对接收到的用户名和密码进行安全验证和过滤，防止恶意输入和攻击。 4. 避免在客户端保存敏感信息，例如将用户名和密码保存在cookie或本地存储中，可以使用session或token来进行用户身份验证。 总之，通过jquery.js传递用户名和密码是存在漏洞的，需要我们在传递和处理敏感信息时采取适当的安全措施，保护用户信息的安全性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值