文章标题 原创 翻译 转载 文章内容 登录框中通常有一个“记住我”的checkbox按钮,它是用来记住当前用户输入的用户名和密码,下次用户再次登录的时候就不用重新输入直接点击登录就可以了(现在很多浏览器自身就带有这样的功能)。在公用电脑上勾选“记住我”是很危险的,在个人电脑上可以给用户提供很多方便。简单的实现使用Cookie就可以了。 简单介绍一下Cookie和Session,详细参考:[Cookie/Session机制详解](http://blog.csdn.net/fangaoxin/article/details/6952954) # 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; }) }, ``` 文章类别 Python Mobile Android Java Shell Life Database Bug Windows IOS Tools Boost Node.js Mac Product Tips C/C++ Golang Javascript React Qt MQ MongoDB Design Web Linux LLM ChatGPT RAG AI 提交