NO IMAGE

  最近做了個登入介面,要實現記住密碼效果,然而看似很簡單,做起來略複雜。我就在不斷改進中,有如下成果,如果可以優化,或有什麼問題,可以評論留言。

    首先,需下載jquery.cookie.js,和md5.js。

   介紹一下這兩個js檔案,jquery.cookie.js 是提供了一些建立cookie的API介面的js檔案,也可以自己寫,md5.js是用來對密碼進行MD5方式的加密。

   再介紹下cookie.js的一般方法:

   cookie儲存在客戶端,儲存方式類似於text,且以鍵值對的形式儲存,即key->value。

   建立cookie

    $.cookie(鍵名,值,儲存時長)     //儲存時長的寫法為{expires:number,path:’/’},expires是要儲存的天數,path是儲存的路徑,一般為’/’。

   刪除cookie,只用將天數設為-1即可。

   取cookie的值

   $.cookie(鍵名)       //返回字串型別的鍵名所對應的值。

   本次所用的md5.js 只有32位加密,而我修改了md5.js 的功能,使他能進行16位加密,所以方法改為$.md5(xxx,16),如果沒有對js檔案進行修改,其方法為$.md5(xxx);

   在上程式碼前,須有幾點強調,首先,加有cookie功能的程式碼需在本地伺服器上實現,乾癟癟的html是無法實現cookie的功能。

   其次,必須下對正確的jquery.cookie.js。

  再次,如果想實時檢視cookie的內容,建議用Firefox瀏覽器,因為有較簡單查詢cookie的方法

   最後,md5.js 只是更好地與資料庫互動,在前端就對密碼加密,你可以使用資料庫的加密方法實現。

   特別說明的是,記住密碼功能不一定由cookie實現,可以使用html5的localstorage來實現。

   <script type=”text/javascript” src=”scripts/jquery-1.8.1.min.js”></script>   

   <script type=”text/javascript” src=”scripts/jquery.cookie.js”></script>   

    <script type=”text/javascript” src=”scripts/md5.js”></script>    

   <body> 

    <label  for=”Username”>使用者名稱:</label>

    <input type=”text” id=”Username” />

     <span id=”error1″ style=”color:red;font-size:large;”></span>

    <label    for=”PSD”>密碼:</label>

   <input type=”password” id=”PSD” />

   <span id=”error2″ style=”color:red;font-size:large;”></span>

   <input   type=”checkbox”  id=”Remember” /><label for=”Remember”>記住密碼</label>

   <input type=”button”  value=”登入”  onclick=”login()” />

    <input type=”reset”  onclick=”IsReset()”  />

   </body>

<script type=”text/javascript”>

        $(document).ready(function() {
            //將獲取的值填充入輸入框中
            var lastUser = $.cookie(‘Last’);                                            //獲取cookie中其鍵名為Last對應的值
            var Isre = document.getElementById(“Remember”);
            var userId = $(‘#Username’);
            var code = $(‘#PSD’);
            if (lastUser != undefined) {                                                 //如果對應的鍵有值,則填充到登入框中,作出響應
                userId.val($.cookie(“UN” lastUser));
                code.val(“****”);                                                                //應把鍵名取得特別點,防止跟其他的cookie衝突,要保證名字的唯一性
                Isre.checked = true;
            } else {
                userId.val(“”);                                                                  //否則輸入框內容為空
            }
        });

        function IsReset() {                                                            //重置函式,so easy 不做說明
            $(‘#Username’).val(“”);
            $(‘#PSD’).val(“”);
            document.getElementById(“Remember”).checked = false;
        }

        function immediately() {                                                                             //立即操作,如果不想登入記住的使用者,意圖對使用者名稱修改,則會呼叫此函式
            var element = document.getElementById(“Username”);
            if (“\v” == “v”) {                                                                                          //驗證所用的瀏覽器是否為IE,如果是則用IE特有的方法新增監聽事件
                element.onpropertychange = webChange;   
            } else {
                element.addEventListener(“input”, webChange, false);            //一般瀏覽器新增監聽事件的方法,將方法webChange與id=”Username”的輸入框繫結
            }                                                                                                                 //當狀態改變時,則呼叫webChange90()

            function webChange() {
                var user = $(“#Username”).val();
                var mdcode = $.cookie(“PSD” user);
                var code = $(“#PSD”);
                var Isrem = document.getElementById(“Remember”);
                if (mdcode != undefined&&mdcode!=””) {                                       //因為密碼經md5加密,不能全部顯示到登入框中,所以cookie中記住的密碼顯示在框中的是****
                    code.val(“****”);                                                                               //而不是真正的密碼和加密後的密碼
                    Isrem.checked = true;
                } else {                                                                                                      //如果cookie中沒有相應的資訊,未匹配成功,則密碼輸入框為空
                    code.val(“”);
                    Isrem.checked = false;
                }
            }
        }
        immediately();

        function login() {             
            //異常判斷…    

            var json = “”;
            var username = $(“#Username”).val();                                            
            var psd = $(“#PSD”).val();
            if (username == “”) {
                $(“#error1”).text(“*”);
            } else { $(“#error1”).text(“”); }
            if (psd == “”) {
                $(“#error2”).text(“*”);
            } else { $(“#error2”).text(“”); }                                    //以上函式是對輸入框是否有值,進行判斷,如果沒有,則顯示星星,以提示你未填登入資訊

            
            if (!(username == “” || psd == “”)) {                           //如果填完了資訊,則進行如下判斷
                var Isre = document.getElementById(“Remember”);
                if (Isre.checked && $.cookie(“IR” username)) {                   //IR username鍵名對應儲存的資訊是真假,用來標記username是否被記住過,即在cookie中是否有儲存
                    var mycode = $.cookie(“PSD” username);

                    var  renewcode=$.md5(psd,16);

                    $.cookie(“IR” username, ‘true’, { expires: 7, path: ‘/’ });
                    $.cookie(“UN” username, username, { expires: 7, path: ‘/’ });
                                                                                                                         //取密碼框中的資料,如果是****則說明cookie中有值,不相同的就儲存新的。
                    if (psd == “****”)
                        {

                            $.cookie(“PSD” username, mycode, { expires: 7, path: ‘/’ });

                             json = ‘{“USERNAME”: “‘ username ‘”, “PSD”: “‘ mycode ‘” }’; 

                        }
                    else
                       {

                             $.cookie(“PSD” username, renewcode, { expires: 7, path: ‘/’ });

                             json = ‘{“USERNAME”: “‘ username ‘”, “PSD”: “‘ renewcode ‘” }’; 

                       }
                    $.cookie(“LAST”, username, { expires: 7, path: ‘/’ });
                } else
                    if (Isre.checked == true&& $.cookie(“IR” username)==undefined) {//如果記住密碼的checked為真,且是新使用者則繼續儲存使用者名稱和密碼,

                                                                                                                                               //大家可以細細體會為什麼要與上面分開寫
                    $.cookie(“LAST”, username, { expires: 7, path: ‘/’ });                //LAST記住的是最近登入的使用者名稱
                    $.cookie(“IR” username, ‘true’, { expires: 7, path: ‘/’ });         //IR記住的是username是否在cookie中
                    $.cookie(“UN” username, username, { expires: 7, path: ‘/’ });//UN記住的是使用者名稱
                    $.cookie(“PSD” username, $.md5(psd,16), { expires: 7, path: ‘/’ });//PSD記住的是加密後的密碼

                } else 

                   if(Isre.checked==false&&$.cookie(“IR” username))  //將原有最近的記住的密碼取消記住

                  {

                          json = ‘{“USERNAME”: “‘ username ‘”, “PSD”: “‘ $.cookie(“PSD” username) ‘” }’;
                     if (username == $.cookie(‘LAST’))                                               //如果LAST對應的值被登入即最近登入的賬號且未點選checkbox,則將cookie中對應user的資訊刪除
                          $.cookie(‘LAST’, ”, { expire: -1, path: ‘/’ });                                 //我沒有想到更好的辦法解決找最近登入的上一個登入的賬號
                    $.cookie(“IR” username, ”, { expires: -1, path: ‘/’ });
                    $.cookie(“UN” username, ”, { expires: -1, path: ‘/’ });
                    $.cookie(“PSD” username, ”, { expires: -1, path: ‘/’ });
                }else                       //新密碼且不記住

                  {  json = ‘{“USERNAME”: “‘ username ‘”, “PSD”: “‘ $.md5(psd) ‘” }’; }

            //與資料庫連線驗證程式碼,不給出
            }
        }

</script>