超简单！使用jQuery实现登录页面的“记住密码”功能
使用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>
全部代码(填入相关信息并且选中“记住我” 后可以关闭该页面再打开，是可以看到被保存的信息的)
<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>
<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>
这是最简单的功能的实现方式，作为入门可以慢慢体会；当然还需要考虑安全问题，以后会再更新。