在網站中,我們經常看到每當我們準備登陸時,網頁詢問我們是否儲存使用者名和密碼,以便下次登陸時不用再次輸入。諸如此類的功能如何實作哪？經過兩天的研究，終于有了收獲！現将我的經驗與大家分享。在網頁中記錄使用者的資訊通常有如下幾種方式：Session、Cookie、以及.Net環境下的ViewState等。比較起來，Session将使用者的資訊暫存在記憶體中，除非使用者關閉網頁，否則資訊将一直有效。是以，用Session儲存的資訊很容易丢失。Cookie用來将使用者的資訊儲存到使用者機的檔案中，這樣資訊就可以長久的儲存。前兩種都是傳統的儲存方式，而ViewState是在微軟.Net環境下新推出的一種對象，它其實是一種特殊的Session，不過一般将資訊儲存在用戶端。關于ViewState的用法大家可以參考一些資料，我在《謹慎Asp.net中static變量的用法》一文中也有叙述。下面我将以使用者名和密碼為例介紹如何通過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 = window.document.cookie.length;
var i = 0;
while (i < clen)
{
var j = i + alen;
if (window.document.cookie.substring(i, j) == arg) return getCookieVal (j);
i = window.document.cookie.indexOf(" ", i) + 1;
if (i == 0)
break;
}
return null;
}
function getCookieVal (offset)
{
var endstr = window.document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = window.document.cookie.length;
return unescape(window.document.cookie.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));
window.document.cookie = name + "=" + escape (value) + "; expires=" + exp.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() - 100);
var cval = GetCookie (name);
window.document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString()+";path=/";
}
有上述代碼也可以看出，删除操作其實就是讓某個Cookie的有效期設定為目前時間減去1毫秒，當然會過期了！
那麼如何将上述代碼應用到DHTML的開發過程中哪？下面就以記錄使用者名和密碼到Cookie中為例進行講解。
為了簡單起見，我們隻在頁面中放置一個使用者名文本域、一個密碼域、一個按鈕和一個複選框。頁面的布局代碼如下：
記錄使用者名和密碼到Cookie中
請輸入使用者名：
請輸入密碼： 記住密碼
下面就開始完成功能代碼的編寫。本來使用者單擊“确定”按鈕後要對使用者名和密碼進行驗證，并且進入相關頁面，我們在這裡換成記錄使用者名和密碼的功能。
将上述三個Cookie的函數粘貼到html代碼的和之間(不要放在和之間)，然後在中添加一個單擊事件處理程式：。在和之間實作remember()函數：
function remember()
{
if(document.getElementById("remember").checked){
SetCookie(document.getElementById("username").value,document.getElementById("password").value);
alert("Saved!");
}
}
這樣就可以在使用者單擊了“記錄”按鈕後将使用者名和對應的密碼記錄到Cookie中。
那麼如何在使用者輸入使用者名後自動填入對應的密碼哪？這就要在中添加一個事件處理函數:。然後把showpassword()的定義同樣放到和之間：
function showpassword()
{
return GetCookie(document.getElementById("username").value);
}
以上就完成了對特定使用者密碼的記錄。下面我們完成密碼的删除部分。在中添加一個事件處理函數:。然後在和之間實作DelCookie()函數：
function DelCookie()
{
DeleteCookie(document.getElementById("username").value);
}
現在大家可以試驗一下，看看預期的功能可否實作。如果大家試驗過後就會發現，當我們删除掉某個使用者的密碼後，每次焦點從username中移出時，password中總是顯示四個掩碼，而不是空，這是為什麼哪？如果大家用alert()語句把文本框中的内容輸出的話，就會發現那四個掩碼其實是“null”這個單詞。這就表明其實已經删除了，但我們顯示密碼時沒有排除這種情況。是以在showpassword()函數中應進行判斷，非空後再把結果賦給password域：
function showpassword()
{
var p=GetCookie(document.getElementById("username").value);
if(p!=null)
document.getElementById("password").value= p;
}
好了，大功告成。完整的代碼如下所示：
記錄使用者名和密碼到Cookie中
請輸入使用者名：
請輸入密碼： 記住密碼
下面是一個php端使用cookie做的一個簡單頁面計數器
This is the firest time you hvae accessed this page in this session.";
echo "A cookie was sent to you and stored in your computer.";
}else {
$pagecount = ++$_COOKIE['kookie'];
setcookie("kookie",$pagecount,time()-10);
setcookie("kookie",$pagecount);
echo "View Count :".$_COOKIE['kookie']."\n
";
}
?>
Page title
Refresh button will refresh the page and the page count! :-)