JavaWeb利用cookie记住账号。
首先,来看看界面什么样子。
记住账号最普遍的做法,就是在点击登录时,将账号保存到cookie中。
材料准备
<script src="${ctx}/background/js/jquery-1.7.2.js" type="text/javascript"></script> <script src="${ctx}/background/js/jquery.cookie.js" type="text/javascript"></script>
去找一下这两个文件,引入到你所在的页面。
form表单
<form action="${ctx}/j_spring_security_check" method="post" id="login_form"> <p> <label>用户名:</label> <input type="text" name="j_username" id="j_username" size="20" class="login_input" autocomplete="off"/> </p> <p> <label>密 码:</label> <input type="password" name="j_password" size="20" class="login_input" /> </p> <p> <input type="checkbox" value="true" id="j_remember"/><label> </label>记住我的账号 </p> <div class="login_bar"> <input class="sub" type="submit" value=" " /> </div> </form>
注意,我使用了spring的security。
核心内容
创建一份login.js,并且在login.jsp中引入。
var COOKIE_NAME = 'sys__username'; $(function() { if ($.cookie(COOKIE_NAME)){ $("#j_username").val($.cookie(COOKIE_NAME)); $("#j_password").focus(); $("#j_remember").attr('checked', true); } else { $("#j_username").focus(); } $("#login_form").submit(function(){ var $remember = $("#j_remember"); if ($remember.attr('checked')) { $.cookie(COOKIE_NAME, $("#j_username").val(), { path: '/', expires: 15 }); } else { $.cookie(COOKIE_NAME, null, { path: '/' }); //删除cookie } }); });
当页面加载的时候,先去判断是否有cookie保存,如果有,则将用户名从cookie中取出,显示在用户名输入框中。
当表单进行提交的时候,如果用户选择记住用户名,那么将用户名保存在cookie中,否则,删除对应的cookie信息。
cookie方法介绍
实例 方法 备注
创建一个会话cookie $.cookie(‘cookieName’,’cookieValue’); 所创建的cookie有效期默认到用户浏览器关闭止,故被称为会话cookie。
创建一个持久cookie $.cookie(‘cookieName’,’cookieValue’,{expires:15}); 当指明时间时,故称为持久cookie,并且有效时间为15天。
创建一个持久并带有效路径的cookie $.cookie(‘cookieName’,’cookieValue’,{expires:15,path:’/’}); 如果不设置有效路径,在默认情况下,只能在cookie设置当前页面读取该cookie,cookie的路径用于设置能够读取cookie的顶级目录。
获取cookie $.cookie(‘cookieName’); 如果存在则返回cookieValue,否则返回null
删除cookie $.cookie(‘cookieName’,null); 如果想删除一个带有效路径的cookie,如下:$.cookie(‘cookieName’,null,{path:’/’});
总结:如果你想保存密码,当然和用户名差不多,不过你需要jquery.md5.js这样一份文件,用来将你保存的密码显示在密码框中。