登錄后記住用戶名-JS解決方案

描述：這段時間給公司做個后台管理系統，功能差不多實現了，回過頭來把登錄頁完善下，剛好碰到了‘記住用戶名‘這個小東西。之前有看過不少代碼，都沒有太留意這部分，這次自己從頭至尾做，那就好好的處理下。

目的：用戶在登錄的時候勾選“記住我”，登錄、退出之后，用戶再次來到登錄頁，默認填寫上次登錄的用戶信息。

實現方法：js/jq實現；用到了window.localStorage保存用戶登錄信息。

擴展：此方案也可保存用戶密碼，安全性自己估量。

詳細：

html代碼：

<form>
    <fieldset>
        <label class="block clearfix">
            <span class="block input-icon input-icon-right">
                <input type="text" class="form-control" placeholder="手機號" id="login_phone" />
                <i class="icon-phone"></i>
            </span>
        </label>

        <label class="block clearfix">
            <span class="block input-icon input-icon-right">
                <input type="text" class="form-control" placeholder="用戶名" id="login_name" />
                <i class="icon-user"></i>
            </span>
        </label>

        <label class="block clearfix">
            <span class="block input-icon input-icon-right">
                <input type="password" class="form-control" placeholder="密碼" id="login_pwd" />
                <i class="icon-lock"></i>
            </span>
        </label>

        <div class="space"></div>

        <div class="clearfix">
            <label class="inline">
                <input type="checkbox" class="ace" id="remb_me"/>
                <span class="lbl"> 記住我</span>
            </label>

            <button type="button" class="width-35 pull-right btn btn-sm btn-primary" onclick="logoning()" >
                <i class="icon-key"></i>
                登陸
            </button>
        </div>

        <div class="space-4"></div>
    </fieldset>
</form>

 

js代碼:

1.在用戶登錄的時候將用戶信息保存到緩存里

//判斷是否保存用戶名
var storage = window.localStorage;
if($("#remb_me").is(':checked')){
    //存儲到loaclStage
    storage["loginphone"] = $("#login_phone").val();
    storage["loginname"] = $("#login_name").val();
    storage["isstorename"] =  "yes"; 
}else{
    storage["loginphone"] = "";
    storage["loginname"] = "";
    storage["isstorename"] =  "no"; 
}

 

2.每次打開登錄頁都會調取該段js判斷是否存在之前保存的用戶信息，存在就將信息填上，並勾選；

//判斷是否存在過用戶
 var storage = window.localStorage;
 if("yes" == storage["isstorename"]){
     $("#remb_me").attr("checked", true);
     $("#login_phone").val(storage["loginphone"]);
     $("#login_name").val(storage["loginname"]);
 }

 

參考資料：博客http://huangkunlun520.blog.51cto.com/2562772/1566640/