登录后记住用户名-JS解决方案

Posted 2020-09-19

描述：这段时间给公司做个后台管理系统，功能差不错实现了，回过头来吧登录页完善下，刚好碰到了‘记住用户名‘这个小东西。之前有看过不少代码，都没有太留意这部分，这次自己从头至尾做，那就好好的处理下。

目的：用户在登录的时候勾选“记住我”，登录、退出之后，用户再次来到登录页，默认填写上次登录的用户信息。

实现方法：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/