登錄後記住用戶名-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/