溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹如何通過jquery.cookie.js實現記住用戶名、密碼登錄功能，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發網站。
Cookies
定義：讓網站服務器把少量數據儲存到客戶端的硬盤或內存，從客戶端的硬盤讀取數據的一種技術；
下載與引入:jquery.cookie.js基于jquery；先引入jquery，再引入：jquery.cookie.js；
下載：http://plugins.jquery.com/cookie/
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script>
1.添加一個"會話cookie"
$.cookie('the_cookie', 'the_value');這里沒有指明 cookie有效時間，所創建的cookie有效期默認到用戶關閉瀏覽器為止，所以被稱為 “會話cookie（session cookie）”。
2.創建一個cookie并設置有效時間為 7天
$.cookie('the_cookie', 'the_value', { expires: 7 });這里指明了cookie有效時間，所創建的cookie被稱為“持久 cookie （persistent cookie）”。注意單位是：天；
3.創建一個cookie并設置 cookie的有效路徑
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });在默認情況下，只有設置 cookie的網頁才能讀取該 cookie。如果想讓一個頁面讀取另一個頁面設置的cookie，必須設置cookie的路徑。cookie的路徑用于設置能夠讀取 cookie的頂級目錄。將這個路徑設置為網站的根目錄，可以讓所有網頁都能互相讀取 cookie （一般不要這樣設置，防止出現沖突）。
4.讀取cookie
$.cookie('the_cookie');5.刪除cookie
.cookie('the_cookie', null); //通過傳遞null作為cookie的值即可6.可選參數
$.cookie('the_cookie','the_value',{
expires:7,
path:'/',
domain:'jquery.com',
secure:true
}) expires：（Number|Date）有效期；設置一個整數時，單位是天；也可以設置一個日期對象作為Cookie的過期日期；
path：（String）創建該Cookie的頁面路徑；
domain：（String）創建該Cookie的頁面域名；
secure：（Booblean）如果設為true，那么此Cookie的傳輸會要求一個安全協議，例如：HTTPS；
代碼示例：
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.cookie.js"></script>
<script src="jquery.base64.js"></script>
<script language="javascript" type="text/javascript">
function setCookie(){ //設置cookie
var loginCode = $("#login_code").val(); //獲取用戶名信息
var pwd = $("#login_password").val(); //獲取登陸密碼信息
var checked = $("[name='checkbox']:checked");//獲取“是否記住密碼”復選框
if(checked){ //判斷是否選中了“記住密碼”復選框
$.cookie("login_code",loginCode);//調用jquery.cookie.js中的方法設置cookie中的用戶名
$.cookie("pwd",$.base64.encode(pwd));//調用jquery.cookie.js中的方法設置cookie中的登陸密碼，并使用base64（jquery.base64.js）進行加密
}else{
$.cookie("pwd", null);
}
}
function getCookie(){ //獲取cookie
var loginCode = $.cookie("login_code"); //獲取cookie中的用戶名
var pwd = $.cookie("pwd"); //獲取cookie中的登陸密碼
if(pwd){//密碼存在的話把“記住用戶名和密碼”復選框勾選住
$("[name='checkbox']").attr("checked","true");
}
if(loginCode){//用戶名存在的話把用戶名填充到用戶名文本框
$("#login_code").val(loginCode);
}
if(pwd){//密碼存在的話把密碼填充到密碼文本框
$("#login_password").val($.base64.decode(pwd));
}
}
function login(){
var userName = $('#login_code').value;
if(userName == ''){
alert("請輸入用戶名。");
return;
}
var userPass = $('#login_password').value;
if(userPass == ''){
alert("請輸入密碼。");
return;
}
//判斷是否選中復選框，如果選中，添加cookie
if($("[name='checkbox']").attr("checked","true")){
//添加cookie
setCookie();
alert("記住密碼登錄。");
window.location = "http://www.baidu.com";
}else{
alert("不記密碼登錄。");
window.location = "http://www.baidu.com";
}
}
</script>
</head>
<body onload="getCookie();">
<center>
<table width="400px" height="180px" cellpadding="0" cellspacing="0" border="1" >
<tr>
<td align="center" colspan="2">歡迎登錄</td>
</tr>
<tr>
<td align="right">
<label>用戶名：</label>
</td>
<td align="left">
<input type="text" id="login_code" name="login_code" />
</td>
</tr>
<tr>
<td align="right">
<label>密 碼：</label>
</td>
<td align="left">
<input type="password" id="login_password" name="login_password" />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<span >是否記住密碼</span>
<input type="checkbox" />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" id="subLogin" name="subLogin" value="登 錄" onclick="login();"/>
</td>
</tr>
</table>
</center>
</body>
</html>以上是“如何通過jquery.cookie.js實現記住用戶名、密碼登錄功能”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
