登入介面記住密碼之jquery.cookie.js和md5.js
最近做了個登入介面，要實現記住密碼效果，然而看似很簡單，做起來略複雜。我就在不斷改進中，有如下成果，如果可以優化，或有什麼問題，可以評論留言。
首先，需下載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>