用户在登录的时候勾选“记住我”,
描述:这段时间给公司做个后台管理系统,功能差不错实现了,回过头来吧登录页完善下,刚好碰到了‘记住用户名‘这个小东西。之前有看过不少代码,都没有太留意这部分,这次自己从头至尾做,那就好好的处理下。
目的:用户在登录的时候勾选“记住我”,登录、退出之后,用户再次来到登录页,默认填写上次登录的用户信息。
实现方法:js/jq实现;用到了window.localStorage保存用户登录信息。
扩展:此方案也可保存用户密码,安全性自己估量。
详细:
html代码:
1 <form> 2 <fieldset> 3 <label class="block clearfix"> 4 <span class="block input-icon input-icon-right"> 5 <input type="text" class="form-control" placeholder="手机号" id="login_phone" /> 6 <i class="icon-phone"></i> 7 </span> 8 </label> 9 10 <label class="block clearfix"> 11 <span class="block input-icon input-icon-right"> 12 <input type="text" class="form-control" placeholder="用户名" id="login_name" /> 13 <i class="icon-user"></i> 14 </span> 15 </label> 16 17 <label class="block clearfix"> 18 <span class="block input-icon input-icon-right"> 19 <input type="password" class="form-control" placeholder="密码" id="login_pwd" /> 20 <i class="icon-lock"></i> 21 </span> 22 </label> 23 24 <div class="space"></div> 25 26 <div class="clearfix"> 27 <label class="inline"> 28 <input type="checkbox" class="ace" id="remb_me"/> 29 <span class="lbl"> 记住我</span> 30 </label> 31 32 <button type="button" class="width-35 pull-right btn btn-sm btn-primary" onclick="logoning()" > 33 <i class="icon-key"></i> 34 登陆 35 </button> 36 </div> 37 38 <div class="space-4"></div> 39 </fieldset> 40 </form>
js代码:
1.在用户登录的时候讲用户信息保存到缓存里
1 //判断是否保存用户名 2 var storage = window.localStorage; 3 if($("#remb_me").is(':checked')){ 4 //存储到loaclStage 5 storage["loginphone"] = $("#login_phone").val(); 6 storage["loginname"] = $("#login_name").val(); 7 storage["isstorename"] = "yes"; 8 }else{ 9 storage["loginphone"] = ""; 10 storage["loginname"] = ""; 11 storage["isstorename"] = "no"; 12 }
2.每次打开登录页都会调取改段js判断是否存在之前保存的用户信息,存在就将信息填上,并勾选;
1 //判断是否存在过用户 2 var storage = window.localStorage; 3 if("yes" == storage["isstorename"]){ 4 $("#remb_me").attr("checked", true); 5 $("#login_phone").val(storage["loginphone"]); 6 $("#login_name").val(storage["loginname"]); 7 }
参考资料:博客http://huangkunlun520.blog.51cto.com/2562772/1566640/