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

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

实现方法：js/jq实现；用到了window.localStorage保存用户登录信息。

扩展：此方案也可保存用户密码，安全性自己估量。

详细：

html代码：

1 
     
       2     
      
        3         
        4              5                  6                  7              8          9 10         
       11             12                 13                 14             15         16 17         
       18             19                 20                 21             22         23 24         
       
25 26         
       
        27             
        28                 29                  记住我30             31 32             
        33                 34                 登陆35             36         
       
37 38         
       
39     
      
40 
     

 

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/