cookie中儲存使用者名稱和密碼及如何寫程式通過cookie獲取使用者名稱密碼
cookie中儲存使用者名稱和密碼在網站中,我們經常看到每當我們準備登陸時,網頁詢問我們是否儲存使用者名稱
cookie中儲存使用者名稱和密碼
在網站中,我們經常看到每當我們準備登陸時,網頁詢問我們是否儲存使用者名稱和密碼,以便下次登陸時不用再次輸入。諸如此類的功能如何實現哪？經過兩天的研究，終於有了收穫！現將我的經驗與大家分享。
在網頁中記錄使用者的資訊通常有如下幾種方式：Session、Cookie、以及.Net環境下的ViewState等。比較起來，Session將使用者的資訊暫存在記憶體中，除非使用者關閉網頁，否則資訊將一直有效。所以，用Session儲存的資訊很容易丟失。Cookie用來將使用者的資訊儲存到使用者機的檔案中，這樣資訊就可以長久的儲存。前兩種都是傳統的儲存方式，而ViewState是在微軟.Net環境下新推出的一種物件，它其實是一種特殊的Session，不過一般將資訊儲存在客戶端。關於ViewState的用法大家可以參考一些資料，我在《謹慎Asp
下面我將以使用者名稱和密碼為例介紹如何通過Cookie儲存使用者的資訊。
因為Cookie是通過計算機上的檔案來記錄有關資訊，所以涉及到對Cookie的操作無外乎讀取、賦值和刪除。另外，由於Cookie提供了一項有效期的功能，所以還可以對Cookie設定有效期。下面將在DHTML和VS.Net兩種環境下分別介紹如何實現Cookie的各種操作。
一、DHTML環境
這種環境下我們使用的是傳統的JavaScript指令碼，通過對頁面中各種物件的屬性和事件進行操作來完成我們的預期任務。
1、讀取Cookie值
Cookie值是按照索引儲存的，也就是說不同的索引有不同的Cookie值。所以我們就可以將我們想要儲存的物件（在這裡為使用者名稱）作為索引，讀取該儲存物件的Cookie值。方法如下：
function GetCookie (name)
{
var arg = name + "=";
var alen = arg.length;
var clen = windookie.length;
var i = 0;
while (i < clen)
{
var j = i + alen;
if (windookie.substring(i, j) == arg) return getCookieVal (j);
i = windookie.indexOf(" ", i) + 1;
if (i == 0)
break;
}
return null;
}
function getCookieVal (offset)
{
var endstr = windookie.indexOf (";", offset);
if (endstr == -1)
endstr = windookie.length;
return unescape(windookie.substring(offset, endstr));
}
為什麼讀取Cookie值還要兩個函式來完成？這是因為Cookie值是按照“Cookie名；”+“Cookie值；”+“有效期；”+“路徑”的格式來儲存的。這將在下文中提到。這樣初次讀到的Cookie是一連串的以分號分隔的字串。我們還需要對其進行進一步處理才能提取出我們想要的資訊。在上面兩個函式中，第一個函式GetCookie用來按索引獲取我們想要讀取的Cookie的位置，第二個函式getCookieVal用來提取Cookie中我們想要的資訊。所以使用時直接呼叫GetCookie(name)就可以了，其中name是Cookie的索引，也就是名稱，或者直接點說就是我們要儲存其值的東西。
2、設定Cookie值
正如上面所說，Cookie的存取方式有點類似於雜湊表，是以名稱作為索引存取的。一個Cookie的格式如下：
Cookie名稱（作為Cookie的索引便於以後的各種操作）+“=”+Cookie值+“；expires=+有效期+“；path=”+路徑+“；domain=”+域+“；secure=”+安全級別
可以看出每個Cookie實際有6個屬性,這些屬性恰好構成了一條記錄。多條Cookie記錄在硬碟中是以集合的方式存取的。也就是說所有Cookie記錄構成了類似於一張表的結構。而Cookie又可以有多個集，那時不是就可以理解成一個庫哪？這裡不去講解怎麼樣以表或庫的方式讀寫Cookie記錄集，只是講解基本的Cookie操作。並且我還沒有發現真正有把Cookie集合當成表一樣的專門操作方法。畢竟，以表的方式理解Cookie集合只是我的一家之言，僅供大家理解上的方便。
正因為每個Cookie實際上是有多個屬性組成的，所以設定Cookie時理所當然地應該設定多個屬性值，雖然不是每一個屬性都必須填寫，但大家至少應該把Cookie名稱和Cookie值填上，否則這個Cookie就沒有任何意義了。設定一個Cookie值的方法如下：
function SetCookie (name, value)
{
var exp = new Date();
exp.setTime(exp.getTime() + (30*24*60*60*1000));
windookie = name + "=" + escape (value) + "; expire*=" + **p.toGMTString()+";path=/";
}
其中，name為Cookie的名稱，value為Cookie的值。如果還想指定Cookie的有效期，再傳入一個時間引數就可以了，不過要注意這裡的時間是以毫秒計算的，所以如果要設定日月年等長時間時要進行計算。需要注意的是如果Cookie的名稱和值中含有漢字的話，最好事先對其進行編碼，否則可能顯示結果不會很理想。
3、刪除Cookie
這麼叫也許並不恰當，因為以下的介紹忠並沒有真正的刪除Cookie。我們就勉強這麼叫吧。上面說每一個Cookie都有一個有效期，過了這個有效期該Cookie就會失效，獲取到的Cookie值將為空（null），使用該Cookie的值將會出錯。所以如果要刪除某個Cookie的話，只要讓其過期就可以了。所以刪除Cookie的操作就是讓其過期的操作：
function DeleteCookie (name)
{
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
windookie = name + "=" + cval + "; expire*=" + **p.toGMTString()+";path=/";
}
有上述程式碼也可以看出，刪除操作其實就是讓某個Cookie的有效期設定為當前時間減去1毫秒，當然會過期了！
那麼如何將上述程式碼應用到DHTML的開發過程中哪？下面就以記錄使用者名稱和密碼到Cookie中為例進行講解。
為了簡單起見，我們只在頁面中放置一個使用者名稱文字域、一個密碼域、一個按鈕和一個複選框。頁面的佈局程式碼如下：
<html>
<head>
<title>記錄使用者名稱和密碼到Cookie中</title>
</head>
<body>
請輸入使用者名稱：<input id="username" type="text"$amp;>amp;$lt;br>
請輸入密碼：<input id="password" type="password"$amp;>amp;$amp;nbsp; <input id="remem" type="checkbox">記住使用者名稱和密碼<br>
<input value="記錄" type="button"$amp;>amp;$amp;nbsp; <input value="刪除" type="button">
</body>
</html>
下面就開始完成功能程式碼的編寫。本來使用者單擊“確定”按鈕後要對使用者名稱和密碼進行驗證，並且進入相關頁面，我們在這裡換成記錄使用者名稱和密碼的功能。
將上述三個Cookie的函式貼上到html程式碼的<head>和</head>之間（不要放在<title>和</title>之間），然後在<input value="記錄" type="button">中新增一個單擊事件處理程式：<input value="記錄" type="button" onClick="remember()">。在<head>和</head>之間實現remember()函式：
function remember()
{
if(document.all.remem.checked)
SetCookie(document.all.username.value,document.all.password.value);
}
這樣就可以在使用者單擊了“記錄”按鈕後將使用者名稱和對應的密碼記錄到Cookie中。
那麼如何在使用者輸入使用者名稱後自動填入對應的密碼哪？這就要在<input id="username" type="text">中新增一個事件處理函式:<input id="username" type="text" onblur="showpassword()">。然後把showpassword()的定義同樣放到<head>和</head>之間：
function showpassword()
{
return GetCookie(document.all.username.value);
}
以上就完成了對特定使用者密碼的記錄。下面我們完成密碼的刪除部分。在<input value="刪除" type="button">中新增一個事件處理函式:<input value="刪除" type="button" onClick="DelCookie()">。然後在<head>和</head>之間實現DelCookie()函式：
function DelCookie()
{
DeleteCookie(document.all.username.value);
}
現在大家可以試驗一下，看看預期的功能可否實現。如果大家試驗過後就會發現，當我們刪除掉某個使用者的密碼後，每次焦點從username中移出時，password中總是顯示四個掩碼，而不是空，這是為什麼哪？如果大家用alert()語句把文字框中的內容輸出的話，就會發現那四個掩碼其實是“null”這個單詞。這就表明其實已經刪除了，但我們顯示密碼時沒有排除這種情況。所以在showpassword()函式中應進行判斷，非空後再把結果賦給password域：
function showpassword()
{
var p=GetCookie(document.all.username.value);
if(p!=null)
document.all.password.value= p;
}
好了，大功告成。完整的程式碼如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title$amp;>amp;$amp;#35760;录用户名和密码到Cookie中</title>
<script>
function GetCookie (name)
{
var arg = name + "=";
var alen = arg.length;
var clen = windookie.length;
var i = 0;
while (i < clen)
{
var j = i + alen;
if (windookie.substring(i, j) == arg) return getCookieVal (j);
i = windookie.indexOf(" ", i) + 1;
if (i == 0)
break;
}
return null;
}
function getCookieVal (offset)
{
var endstr = windookie.indexOf (";", offset);
if (endstr == -1)
endstr = windookie.length;
return unescape(windookie.substring(offset, endstr));
}
function SetCookie (name, value)
{
var exp = new Date();
exp.setTime(exp.getTime() + (30*24*60*60*1000));
windookie = name + "=" + escape (value) + "; expire*=" + **p.toGMTString()+";path=/";
}
function DeleteCookie (name)
{
var exp = new Date();
exp.setTime (exp.getTime() - 100);
var cval = GetCookie (name);
windookie = name + "=" + cval + "; expire*=" + **p.toGMTString()+";path=/";
}
function DelCookie()
{
DeleteCookie(document.all.username.value);
}
function remember()
{
if(document.all.remember.checked)
SetCookie(document.all.username.value,document.all.password.value);
}
function showpassword()
{
var p=GetCookie(document.all.username.value);
if(p!=null)
document.all.password.value= p;
}
</script>
</head>
<body>
請輸入使用者名稱：<input id="username" type="text" onblur="showpassword()"$amp;>amp;$lt;br>
請輸入密碼：<input id="password" type="password"$amp;>amp;$amp;nbsp; <input id="remember" type="checkbox">記住密碼<br>
<input value="記錄" type="button" onClick="remember()"$amp;>amp;$amp;nbsp; <input value="刪除" type="button" onClick="DelCookie()">
</body>
</html>