這篇文章主要介紹如何通過jquery.cookie.js實(shí)現(xiàn)記住用戶名、密碼登錄功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),東至企業(yè)網(wǎng)站建設(shè),東至品牌網(wǎng)站建設(shè),網(wǎng)站定制,東至網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,東至網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

jquery是什么

jquery是一個(gè)簡(jiǎn)潔而快速的JavaScript庫，它具有獨(dú)特的鏈?zhǔn)秸Z法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展、擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫，能夠用于簡(jiǎn)化事件處理、HTML文檔遍歷、Ajax交互和動(dòng)畫，以便快速開發(fā)網(wǎng)站。

Cookies

定義：讓網(wǎng)站服務(wù)器把少量數(shù)據(jù)儲(chǔ)存到客戶端的硬盤或內(nèi)存，從客戶端的硬盤讀取數(shù)據(jù)的一種技術(shù)；

下載與引入:jquery.cookie.js基于jquery；先引入jquery，再引入：jquery.cookie.js；

下載：http://plugins.jquery.com/cookie/

1.添加一個(gè)"會(huì)話cookie"

$.cookie('the_cookie', 'the_value');

這里沒有指明 cookie有效時(shí)間，所創(chuàng)建的cookie有效期默認(rèn)到用戶關(guān)閉瀏覽器為止，所以被稱為 “會(huì)話cookie（session cookie）”。

2.創(chuàng)建一個(gè)cookie并設(shè)置有效時(shí)間為 7天

$.cookie('the_cookie', 'the_value', { expires: 7 });

這里指明了cookie有效時(shí)間，所創(chuàng)建的cookie被稱為“持久 cookie （persistent cookie）”。注意單位是：天；

3.創(chuàng)建一個(gè)cookie并設(shè)置 cookie的有效路徑

$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });

在默認(rèn)情況下，只有設(shè)置 cookie的網(wǎng)頁才能讀取該 cookie。如果想讓一個(gè)頁面讀取另一個(gè)頁面設(shè)置的cookie，必須設(shè)置cookie的路徑。cookie的路徑用于設(shè)置能夠讀取 cookie的頂級(jí)目錄。將這個(gè)路徑設(shè)置為網(wǎng)站的根目錄，可以讓所有網(wǎng)頁都能互相讀取 cookie （一般不要這樣設(shè)置，防止出現(xiàn)沖突）。

4.讀取cookie

$.cookie('the_cookie');

5.刪除cookie

.cookie('the_cookie', null); //通過傳遞null作為cookie的值即可

6.可選參數(shù)

$.cookie('the_cookie','the_value',{
 expires:7, 
 path:'/',
 domain:'jquery.com',
 secure:true
})　

expires：（Number|Date）有效期；設(shè)置一個(gè)整數(shù)時(shí)，單位是天；也可以設(shè)置一個(gè)日期對(duì)象作為Cookie的過期日期；
path：（String）創(chuàng)建該Cookie的頁面路徑；
domain：（String）創(chuàng)建該Cookie的頁面域名；
secure：（Booblean）如果設(shè)為true，那么此Cookie的傳輸會(huì)要求一個(gè)安全協(xié)議，例如：HTTPS；

代碼示例：

 
 
 
 



 
function setCookie(){ //設(shè)置cookie 
   var loginCode = $("#login_code").val(); //獲取用戶名信息 
   var pwd = $("#login_password").val(); //獲取登陸密碼信息 
   var checked = $("[name='checkbox']:checked");//獲取“是否記住密碼”復(fù)選框
   if(checked){ //判斷是否選中了“記住密碼”復(fù)選框 
   $.cookie("login_code",loginCode);//調(diào)用jquery.cookie.js中的方法設(shè)置cookie中的用戶名 
   $.cookie("pwd",$.base64.encode(pwd));//調(diào)用jquery.cookie.js中的方法設(shè)置cookie中的登陸密碼，并使用base64（jquery.base64.js）進(jìn)行加密 
   }else{ 
   $.cookie("pwd", null); 
   } 
 } 
 function getCookie(){ //獲取cookie 
   var loginCode = $.cookie("login_code"); //獲取cookie中的用戶名 
   var pwd = $.cookie("pwd"); //獲取cookie中的登陸密碼 
   if(pwd){//密碼存在的話把“記住用戶名和密碼”復(fù)選框勾選住 
   $("[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("請(qǐng)輸入用戶名。"); 
  return; 
 } 
 var userPass = $('#login_password').value; 
 if(userPass == ''){ 
  alert("請(qǐng)輸入密碼。"); 
  return; 
 } 
 //判斷是否選中復(fù)選框，如果選中，添加cookie
 if($("[name='checkbox']").attr("checked","true")){ 
  //添加cookie 
  setCookie(); 
  alert("記住密碼登錄。"); 
  window.location = "http://www.baidu.com"; 
 }else{ 
  alert("不記密碼登錄。"); 
  window.location = "http://www.baidu.com"; 
 } 
} 
 
 
 
 
  
   
   歡迎登錄 
   
   
    
    用戶名： 
    
    
     
    
   
   
    
    密 碼： 
    
    
     
    
   
   
    
    是否記住密碼 
     
    
   
   
    
     
    
   
  
 
 

以上是“如何通過jquery.cookie.js實(shí)現(xiàn)記住用戶名、密碼登錄功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！