简单实现网页登录框中的“记住我”

登录框中通常有一个“记住我”的checkbox按钮，它是用来记住当前用户输入的用户名和密码，下次用户再次登录的时候就不用重新输入直接点击登录就可以了（现在很多浏览器自身就带有这样的功能）。在公用电脑上勾选“记住我”是很危险的，在个人电脑上可以给用户提供很多方便。简单的实现使用Cookie就可以了。

简单介绍一下Cookie和Session，详细参考：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>

使用jquery.cookie.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 (res.code === 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('登录失败：' + res.error != undefined ? res.error : '未知错误！');
          }
        },
        error: function(error) {
          alert(`${error.statusText}(${error.status})`);
        }
      });
      return false;
    })
  },