登陸後記住用戶名-JS解決方案

描述：這段時間給公司作個後臺管理系統，功能差很少實現了，回過頭來把登陸頁完善下，恰好碰到了‘記住用戶名‘這個小東西。以前有看過很多代碼，都沒有太留意這部分，此次本身從頭到尾作，那就好好的處理下。

目的：用戶在登陸的時候勾選「記住我」，登陸、退出以後，用戶再次來到登陸頁，默認填寫上次登陸的用戶信息。

實現方法：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/