简单实现⽹页登录框中的“记住我”
登录框中通常有⼀个“记住我”的checkbox按钮，它是⽤来记住当前⽤户输⼊的⽤户名和密码，下次⽤户再次登录的时候就不⽤重新输⼊直接点击登录就可以了（现在很多浏览器⾃⾝就带有这样的功能）。在公⽤电脑上勾选“记住我”是很危险的，在个⼈电脑上可以给⽤户提供很多⽅便。简单的实现使⽤Cookie就可以了。
简单介绍⼀下Cookie和Session，详细参考：
Cookie机制
简单网页
Cookie是浏览器（User Agent）访问⼀些⽹站后，这些⽹站存放在客户端的⼀组数据，⽤于使⽹站等跟踪⽤户，实现⽤户⾃定义功能。
Cookie的Domain和Path属性标识了这个Cookie是哪⼀个⽹站发送给浏览器的；Cookie的Expires属性标识了Cookie的有 效时间，当Cookie的有效时间过了之后，这些数据就被⾃动删除了。
如果不设置过期时间，则表⽰这个Cookie⽣命周期为浏览器会话期间，只要关闭浏览器窗⼝，Cookie就消失了。这种⽣命期为浏览会话期的 Cookie被称为会话Cookie。会话Cookie⼀般不保存在硬盘上⽽是保存在内存⾥。如果设置了过期时间，浏览器就会把Cookie保存到硬盘 上，关闭后再次打开浏览器，这
些Cookie依然有效直到超过设定的过期时间。存储在硬盘上的Cookie可以在不同的浏览器进程间共享，⽐如两个IE窗 ⼝。⽽对于保存在内存的Cookie，不同的浏览器有不同的处理⽅式。
Session机制
Session是存放在服务器端的类似于HashTable结构（每⼀种Web开发技术的实现可能不⼀样，下⽂直接称之为HashTable）来存放⽤户数据，当浏览器第⼀次发送请求时，服务器⾃动⽣成了⼀个HashTable和⼀个Session ID⽤来唯⼀标识这个HashTable，并将其通过响应发送到浏览器。当浏览器第⼆次发送请求，会将前⼀次服务器响应中的Session ID放在请求中⼀并发送到服务器上，服务器从请求中提取出Session ID，并和保存的所有Session ID进⾏对⽐，到这个⽤户对应的HashTable。
⼀般情况下，服务器会在⼀定时间内（默认20分钟）保存这个HashTable，过了时间限制，就会销毁这个HashTable。在销毁之前，程序员可以 将⽤户的⼀些数据以Key和Value的形式暂时存放在这个HashTable中。当然，也有使⽤数据库将这个HashTable序列化后保存起来的，这 样的好处是没了时间的限制，坏处是随着时间的增加，这个数据库会急速膨胀，特别是访问量增加的时候。⼀般还是采取前⼀种⽅式，以减轻服务器压⼒。
登录html表单
<form class="form-signin" action="/api/signin"method="post">
<h2 class="form-signin-heading">管理员登录</h2>
<label for="inputUsername"class="sr-only">⽤户名</label>
<input id="input-username"type="text" name="username"class="form-control" placeholder="⽤户名" required autofocus>
<label for="inputPassword"class="sr-only">密码</label>
<input id="input-password"type="password" name="password"class="form-control" placeholder="密码" required>
<div class="checkbox">
<label>
<input id="remember-me"type="checkbox"value="remember-me"> 记住我
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" id="btn-signin">登录</button>
</form>
使⽤kie.js读写Cookie
// 初始化登录窗⼝
initSignin: function() {
if ($.cookie('bit') === 'true') {
$('#remember-me').attr('checked', 'checked');
$('#input-username').val($.cookie('username'));
$('#input-password').val($.cookie('password'));
}
$('#btn-signin').on('click', function() {
const username = $('#input-username').val();
const password = $('#input-password').val();
$.ajax({
type: 'POST',
url: '/api/signin',
dataType: 'JSON',
data: {
username: username,
password: password
},
success: function(res) {
if (de === 0) {
if ($('#remember-me').is(':checked')) {
$.cookie('username', username, {
expires: 365
});
$.cookie('password', password, {
expires: 365
});
$.cookie('bit', 'true', {
expires: 365
});
} else {
$.removeCookie('username');
$.removeCookie('password');
$.removeCookie('bit');
}
} else {
alert('登录失败：' + != undefined ? : '未知错误！');          }
},
error: function(error) {
alert(`${error.statusText}(${error.status})`);
}
});
return false;
})
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。