使用jQuery实现“记住密码”功能,超简单

A-炜晨科技

已于 2022-09-13 10:03:50 修改

阅读量596

点赞数

分类专栏： jquery 文章标签： jquery 前端 javascript

于 2022-09-13 09:59:42 首次发布

本文链接：https://blog.csdn.net/weixin_64630810/article/details/126827555

版权

jquery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

使用jQuery实现“记住我”功能

在开发网站的时候，为了更好地用户体验一般会增加一个“记住密码”的功能。本文章作为H5入门级别文章，介绍使用jQuery实现该功能。本功能的实现只需一个HTML页面就可以！！！需要大家有js和jQuery基础。

首先介绍一下cookies

Cookie，有时也用其复数形式 Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息。

Cookie 并不是它的原意“甜饼”的意思, 而是一个保存在客户机中的简单的文本文件, 这个文件与特定的 Web 文档关联在一起, 保存了该客户机访问这个Web 文档时的信息, 当客户机再次访问这个 Web 文档时这些信息可供该文档使用。由于“Cookie”具有可以保存在客户机上的神奇特性, 因此它可以帮助我们实现记录用户个人信息的功能, 而这一切都不必使用复杂的CGI等程序 [2] 。

举例来说, 一个 Web 站点可能会为每一个访问者产生一个唯一的ID, 然后以 Cookie 文件的形式保存在每个用户的机器上。如果使用浏览器访问 Web, 会看到所有保存在硬盘上的 Cookie。在这个文件夹里每一个文件都是一个由“名/值”对组成的文本文件,另外还有一个文件保存有所有对应的 Web 站点的信息。在这里的每个 Cookie 文件都是一个简单而又普通的文本文件。透过文件名, 就可以看到是哪个 Web 站点在机器上放置了Cookie(当然站点信息在文件里也有保存)。

简单说，使用cookies可以将一部分信息保存到个人电脑的某个文件中，当程序需要读取这个信息时，只需要找到那个cookie文件就可以了。可以被WEB当做区别其他用户的id。记住密码就是通过cookie实现的。

步骤

1.创建一个登录的HTML文件。

2.引入jQuery.js和jQuery.cookie.js。我在这里又引入了bootstrap稍微美化。注意引入文件的先后顺序！！！

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

3.在HTML的body中写一些基本的元素（主要是用户名、密码、复选框和登录按钮）。标识这些元素的ID！！！

<div id="login" >
    <form action="">
        用户名：<input type="text" class="form-control" id="username">
        密 码：<input type="password" class="form-control" id="password">
        <div class="checkbox">
            <label>
                <input type="checkbox" id="remember"> 记住我
            </label>
        </div>
        <button type="button" id="login" onclick="myLogin()">登录</button>
    </form>
</div>

在这里插入图片描述

4.以上内容都不是很难，接下来就是js代码。这里简单讲解一下，主要有两个方法。

（1）首先是一个 $(document).ready方法。就是检验在之前登陆该页面的时候是否使用了“记住密码”这个功能（即是否存入该cookie信息）。如果有则使用jQuery的方法将这两个值填入到input中，因为是通过保存密码来自动填入的信息，所以“记住我”的复选框在也是要被选中的（复选框默认不会被选中，所以需要代码来选中它）然后还要让“记住密码”的复选框在此被选中。

（2）然后就是保存cookies信息的方法。再点击登录按钮后：首先是要获取username，password，然后进行账号密码的检验。如果成功—>再检验是否选中了“记住密码”的复选框。然后就将username和password保存到cookies中，这两个数据的变量名字也是叫username和password。这里注意，还要考虑不选择复选框的情况。所以如果判断复选框没被选中就要清除之前已经保存的cookies信息。

<script type="text/javascript">
    //页面刚刚打开时检查是否有cookie信息，如果有则填入该信息。
    $(document).ready(function(){
      //判断是否保存了username这个变量的cookie信息
       if ($.cookie("username") != null) {
         console.log("ok");
         //往input#username填入存到cookie中username的值
         $("#username").val($.cookie("username"));
         //往input#password填入存到cookie中username的值
         $("#password").val($.cookie("password"));
         //让“记住我”的复选框保持被选中状态
         $('input:checkbox').attr("checked", true);
       }
    });
    
	//登陆按钮触发的方法，用来验证身份和保存cookie信息
    function myLogin(){
      username = $('#username').val(); //用户名
      password = $('#password').val();
      
      alert("登录成功！！");
      //在返回登录成功的信息后
      
      remember = $('#remember').is(':checked') ? 1 : 0;
      //如果“记住我是被选中的，则保存姓名和密码信息”
      if (remember == 1) {
        $.cookie("username", username, {
          //cookies信息的有效时常（7天）。
          expires: 7
        });
        $.cookie("password", password, {
          expires: 7
        });
      } else {
           //如果“记住我是没被选中的，则移除之前已经保存过的信息。”
        $.removeCookie('username');
        $.removeCookie('password');
      }
    }
  </script>

注意: 里面的标签需要按照自身项目定义的名字所修改

记得要加这个

全部代码(填入相关信息并且选中“记住我” 后可以关闭该页面再打开，是可以看到被保存的信息的)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>记住密码</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <!-- <link rel="stylesheet" href="css/style.css"> -->
    <style type="text/css">
      #login{
        margin: 10%;
      }
    </style>
	</head>
	<body>
    <div id="login" >
      <form action="">
        用户名：<input type="text" class="form-control" id="username">
        密 码：<input type="password" class="form-control" id="password">
        <div class="checkbox">
        		<label>
        			<input type="checkbox" id="remember"> 记住我
        		</label>
        	</div>
        <button type="button" id="login" onclick="myLogin()">登录</button>
      </form>
    </div>
	</body>
  <script type="text/javascript">
    //检查cookie
    $(document).ready(function(){
      console.log("ok");
      console.log($.cookie("username"));
       if ($.cookie("username") != null) {
         console.log("ok");
         //往input#username填入存到cookie中username的值
         $("#username").val($.cookie("username"));
         //往input#password填入存到cookie中username的值
         $("#password").val($.cookie("password"));
         //让“记住我”的复选框保持被选中状态
         $('input:checkbox').attr("checked", true);
       }
    });
    
    function myLogin(){
      username = $('#username').val(); //用户名
      password = $('#password').val();
      
      alert("登录成功！！");
      //在返回登录成功的信息后
      
      remember = $('#remember').is(':checked') ? 1 : 0;
      //如果“记住我是被选中的，则保存姓名和密码信息”
      if (remember == 1) {
        $.cookie("username", username, {
          expires: 7
        });
        $.cookie("password", password, {
          expires: 7
        });
        console.log($.cookie("username"));
        //如果“记住我是没被选中的，则移除之前已经保存过的信息。”
      } else {
        $.removeCookie('username');
        $.removeCookie('password');
      }
    }
  </script>
</html>