經過jquery.cookie.js實現記住用戶名、密碼登陸功能

時間 2019-12-14

標籤經過 jquery.cookie.js jquery cookie 實現記住用戶名密碼登陸功能欄目 JQuery 简体版

原文原文鏈接

Cookiesjavascript

定義：讓網站服務器把少許數據儲存到客戶端的硬盤或內存，從客戶端的硬盤讀取數據的一種技術；html

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

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

<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）」。注意單位是：天；cookie

3.建立一個cookie並設置 cookie的有效路徑session

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

在默認狀況下，只有設置 cookie的網頁才能讀取該 cookie。若是想讓一個頁面讀取另外一個頁面設置的cookie，必須設置cookie的路徑。cookie的路徑用於設置可以讀取 cookie的頂級目錄。將這個路徑設置爲網站的根目錄，能夠讓全部網頁都能互相讀取 cookie （通常不要這樣設置，防止出現衝突）。dom

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" style="margin-top:100px;">  
        <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" style="width:160px; margin-left:10px;" />  
            </td>  
        </tr>  
        <tr>  
            <td align="right">  
                <label>密  碼：</label>  
            </td>  
            <td align="left">  
                <input type="password" id="login_password" name="login_password" style="width:160px; margin-left:10px;" />  
            </td>  
        </tr>  
        <tr>  
            <td align="center" colspan="2">  
                <span style="font-size:12px; color:blue; vertical-align:middle;">是否記住密碼</span>  
                <input type="checkbox" style="vertical-align:middle;" />  
            </td>  
        </tr>  
        <tr>  
            <td align="center" colspan="2">  
                <input type="submit" id="subLogin" name="subLogin" value="登 錄" onclick="login();"/>    
            </td>  
        </tr>  
    </table>  
</center>  
</body>  
</html>