JavaScript Cookie精通之路

    Cookies，有些人喜歡它們，有些人憎恨它們。但是，很少有人真正知道如何使用它們。現在你可以成為少數人中的成員－可以自傲的Cookie 大師。

   

    如果你象作者一樣記性不好，那麼你可能根本記不住人們的名字。我遇到人時，多半隻是點點頭，問句“吃了嘛！”，而且期望問候到此為止。如果還需要表示些什麼，那麼我就得求助於一些狡猾的技巧，好讓我能想對方是誰。比如胡扯起一些和對方有關的人，不管他們之間關係多遠，只要能避免不記得對方名字的尷尬就好： “你隔壁鄰居的侄子的可愛小狗邁菲斯特怎麼樣？”通過這個方法，我希望能讓對方感到，我確實很重視他（她），甚至還記得這些瑣事，雖然實際上連名字都忘記了。但是，不是我不重視，而是我的記憶力實在是糟糕，而且要記住的名字又實在太多。如果我能給每個人設定cookies，那麼我就不會再犯這種記憶力問題了。

   

    什麼是Cookies?

   

    你會問，什麼是cookies呢? cookie 是瀏覽器儲存在使用者電腦上的少量資料。它與特定的WEB頁或WEB網站關聯起來，自動地在WEB瀏覽器和WEB伺服器之間傳遞。

   

    比如，如果你啟動並執行是Windows作業系統，使用Internet Explorer上網，那麼你會發現在你的“Windows”目錄下面有一個子目錄，叫做“Temporary Internet Files”。如果你有空看看這個目錄，就會發現裡面有一些檔案，檔案名稱看起來就象電子郵件地址。比如在我機器上的這個目錄裡，就有 “jim@support.microsoft.com”這樣的檔案。這是一個cookie 檔案，這個檔案從哪來呢？猜一猜，它來自微軟的支援網站。順便說一句，這不是我的電子郵件地址，特此澄清。

   

    對於管理細小的、不重要的、不想儲存在中央資料庫裡的細節資訊，Cookies 是個很不錯的方案。（這不是說大家的名字不重要。）比如，目前網站上不斷增長的自訂服務，可以為每個使用者定製他們要看的內容。如果你設計的就是這樣一個網站，那麼你怎麼來管理這樣的資訊：一個使用者喜歡綠色的菜單條，而另一個喜歡紅色的。確實是個累人的問題。不過，這樣的資訊，可以很安全地記錄到 cookie，並儲存在使用者的電腦上，而你自己的資料庫空間可以留給更長久更有意義的資料。

   

    FYI: Cookies 對於安全用途，通常很有用。我不想在此就這一問題過於深入，只是提供一個樣本，可以看到如何使用在一段時間之後到期的cookies來保證網站安全：

   

    1. 使用使用者名稱和口令，通過 SSL 登入。

    2. 在伺服器的資料庫裡檢查使用者名稱和口令。如果登入成功，建立一個目前時間標籤的訊息摘要 (比如 MD5) ，並把它儲存在cookie和伺服器資料庫裡。把使用者的登入時間儲存在伺服器資料庫裡面的使用者記錄裡。

    3. 在進行每個安全事務時（使用者處於登入狀態的任何事務），把cookie的訊息摘要和儲存在伺服器資料庫裡的摘要進行比較，如果比較失敗，就把使用者引導到登入介面。

    4. 如果第3步檢查通過，那麼檢查目前時間和登入時間之音經過的時間是否超過允許的時間長度。如果使用者已經逾時，那麼就把使用者引到登入介面。

    5. 如果第3步和第4步都通過了，那麼把登入時間重新設定成目前時間，允許事務發生。那些需要你登入的安全網站，可能多數使用的都是和這裡介紹的類似的方法。

   

    Cookie 的構成

   

    Cookies最初設計時，是為了CGI編程。但是，我們也可以使用Javascript指令碼來操縱cookies。在本文裡，我們將示範如何使用Javascript指令碼來操縱cookies。(如果有需求，我可能會在以後的文章裡介紹如何使用Perl進行cookie管理。但是如果實在等不得，那麼我現在就教你一手：仔細看看CGI.pm。在這個CGI包裡有一個cookie()函數，可以用它建立cookie。但是，還是讓我們先來介紹cookies的本質。

   

    在Javascript指令碼裡，一個cookie 實際就是一個字串屬性。當你讀取cookie的值時，就得到一個字串，裡面當前WEB頁使用的所有cookies的名稱和值。每個cookie除了 name名稱和value值

這兩個屬性以外，還有四個屬性。這些屬性是： expires到期時間、 path路徑、 domain域、以及 secure安全

。

   

    Expires – 到期時間。指定cookie的生命期。具體是值是到期日期。如果想讓cookie的存在期限超過當前瀏覽器會話時間，就必須使用這個屬性。當過了到期日時，瀏覽器就可以刪除cookie檔案，沒有任何影響。

   

    Path – 路徑。指定與cookie關聯的WEB頁。值可以是一個目錄，或者是一個路徑。如果http://www.zdnet.com/devhead /index.html 建立了一個cookie，那麼在http://www.zdnet.com/devhead/目錄裡的所有頁面，以及該目錄下面任何子目錄裡的頁面都可以訪問這個cookie。這就是說，在http://www.zdnet.com/devhead/stories/articles 裡的任何頁面都可以訪問http://www.zdnet.com/devhead/index.html建立的cookie。但是，如果http: //www.zdnet.com/zdnn/ 需要訪問http://www.zdnet.com/devhead/index.html設定的cookes，該怎麼辦？這時，我們要把cookies 的path屬性設定成“/”。在指定路徑的時候，凡是來自同一伺服器，URL裡有相同路徑的所有WEB頁面都可以共用cookies。

現在看另一個例子：如果想讓 http://www.zdnet.com/devhead/filters/ 和http://www.zdnet.com/devhead/stories/共用cookies，就要把path設成“/devhead”。

   

    Domain – 域。指定關聯的WEB伺服器或域。值是網域名稱，比如zdnet.com。這是對path路徑屬性的一個延伸。如果我們想讓 catalog.mycompany.com 能夠訪問shoppingcart.mycompany.com設定的cookies，該怎麼辦? 我們可以把domain屬性設定成“mycompany.com”，並把path屬性設定成“/”。FYI：不能把cookies域屬性設定成與設定它的伺服器的所在域不同的值。

   

    Secure – 安全。指定cookie的值通過網路如何在使用者和WEB伺服器之間傳遞。這個屬性的值或者是“secure”，或者為空白。預設情況下，該屬性為空白，也就是使用不安全的HTTP串連傳遞資料。如果一個 cookie 標記為secure，那麼，它與WEB伺服器之間就通過HTTPS或者其它安全性通訊協定傳遞資料。不過，設定了secure屬性不代表其他人不能看到你機器本地儲存的cookie。換句話說，把cookie設定為secure，只保證cookie與WEB伺服器之間的資料轉送過程加密，而儲存在本地的 cookie檔案並不加密。

如果想讓本地cookie也加密，得自己加密資料。

   

    操縱Cookies

   

    請記住，cookie就是文檔的一個字串屬性。要儲存cookie，只要建立一個字串，格式是name=<value>（名稱＝值），然後把文檔的 document.cookie 設定成與它相等即可。比如，假設想儲存表單接收到的使用者名稱，那麼代碼看起來就象這樣：

   

    document.cookie = "username" + escape(form.username.value);

   

    在這裡，使用 escape() 函數非常重要，因為cookie值裡可能包含分號、逗號或者空格。這就是說，在讀取cookie值時，必須使用對應的unescape()函數給值解碼。

   

    我們當然還得介紹cookie的四個屬性。這些屬性用下面的格式加到字串值後面：

   

    name=<value>[; expires=<date>][; domain=<domain>][; path=<path>][; secure]

   

    名稱=<值>[; expires=<日期>][; domain=<域>][; path=<路徑>][; 安全]

   

    <value>, <date>, <domain> 和 <path> 應當用對應的值替換。<date> 應當使用GMT格式，可以使用Javascript指令碼語言的日期類Date的.toGMTString() 方法得到這一GMT格式的日期值。方括弧代表這項是可選的。比如在 [; secure]兩邊的方括弧代表要想把cookie設定成安全的，就需要把"; secure" 加到cookie字串值的後面。如果"; secure" 沒有加到cookie字串後面，那麼這個cookie就是不安全的。不要把角括弧<> 和方括弧[] 加到cookie裡（除非它們是某些值的內容）。設定屬性時，不限屬性，可以用任何順序設定。

   

    下面是一個例子，在這個例子裡，cookie "username" 被設定成在15分鐘之後到期，可以被伺服器上的所有目錄訪問，可以被"mydomain.com"域裡的所有伺服器訪問，安全狀態為安全。

   
// Date() 的構造器設定以毫秒為單位<br /> // .getTime() 方法返回時間，單位為毫秒<br /> // 所以要設定15分鐘到期，要用60000毫秒乘15分鐘<br /> var expiration = new Date((new Date()).getTime() + 15 * 60000);<br /> document.cookie = "username=" + escape(form.username.value)+ "; expires ="+ expiration.toGMTString() + "; path=" + "/" + "; _domain=" + "mydomain.com" + "; secure";

   

    讀取cookies值有點象個小把戲，因為你一次就得到了屬於當前文檔的所有cookies。

   

    // 下面這個語句讀取了屬於當前文檔的所有cookies

    var allcookies = document.cookie;

   

    現在，我們得解析allcookies變數裡的不同cookies，找到感興趣的指定cookie。這個工作很簡單，因為我們可以利用Javascript 語言提供的擴充字元串支援。

   

    如果我們對前面分配的cookie "username" 感興趣，可以用下面的指令碼來讀取它的值。

   
// 我們定義一個函數，用來讀取特定的cookie值。<br /> function getCookie(cookie_name)<br /> ｛<br /> var allcookies = document.cookie;<br /> var cookie_pos = allcookies.indexOf(cookie_name);</p><p> // 如果找到了索引，就代表cookie存在，<br /> // 反之，就說明不存在。<br /> if (cookie_pos != -1)<br /> ｛<br /> // 把cookie_pos放在值的開始，只要給值加1即可。<br /> cookie_pos += cookie_name.length + 1;<br /> var cookie_end = allcookies.indexOf(";", cookie_pos);</p><p> if (cookie_end == -1)<br /> ｛<br /> cookie_end = allcookies.length;<br /> ｝</p><p> var value = unescape(allcookies.substring(cookie_pos, cookie_end));<br /> ｝</p><p> return value;<br /> ｝</p><p> // 調用函數<br /> var cookie_val = getCookie("username");

 

   

    上面常式裡的 cookie_val 變數可以用來產生動態內容，或者發送給伺服器端CGI指令碼進行處理。現在你知道了使用Javascript指令碼操縱cookies的基本方法。但是，如果你跟我一樣，那麼我們要做的第一件事，就是建立一些介面函數，把cookies處理上的麻煩隱藏起來。不過，在你開始編程之前，稍候片刻。這些工作，早就有人替你做好了。你要做的，只是到哪去找這些介面函數而已。

   

    比如，在David Flangan的Javascript: The Definitive Guide 3rd Ed.這本書裡，可以找到很好的cookie應用類。你也可以在Oreilly的WEB網站上找到這本書裡的例子。本文最後的連結清單裡，有一些訪問這些 cookie樣本的直接連結。

   

    Cookies 怪獸

   

    因為某些原因Cookies 的名聲很不好。許多人利用cookies做一些卑鄙的事情，比如流量分析、點擊跟蹤。Cookies 也不是非常安全，特別是沒有secure屬性的cookies。不過，即使你用了安全的cookies，如果你和別人共用電腦，比如在網吧，那麼別人就可以窺探電腦硬碟上未加密儲存的cookie檔案，也就有可能竊取你的敏感資訊。所以，如果你是一個WEB開發人員，那麼你要認真考慮這些問題。不要濫用cookies。不要把使用者可能認為是敏感的資料儲存在cookies裡。如果把使用者的社會保險號、信用卡號等儲存在cookie裡，等於把這些敏感資訊放在窗戶紙下，無異於把使用者投到極大危險之中。一個好的原則是，如果你不想陌生人瞭解你的這些資訊，那就不要把它們儲存在cookies裡。

   

    另外，cookies還有一些實際的限制。Cookies保留在電腦上，不跟著使用者走。如果使用者想換電腦，那麼新電腦無法得到原來的cookie。甚至使用者在同一台電腦上使用不同瀏覽器，也得不到原來的cookie：Netscape 不能讀取Internet Explorer 的cookies。

   

    還有，使用者也不願意接受cookies。所以不要以為所有的瀏覽器都能接受你發出的cookies。如果瀏覽器不接受 cookies，你要保證自己的WEB網站不致因此而崩潰或中斷。

   

    另外WEB 瀏覽器能保留的cookies不一定能超過300個。也沒有標準規定瀏覽器什麼時候、怎麼樣作廢cookies。所以達到限制時，瀏覽器能夠有效地隨機刪除cookies。瀏覽器保留的來自一個WEB伺服器上的cookies，不超過20個，每個cookie的資料（包括名稱和值），不超過4K位元組。(不過，本文裡的cookie尺寸沒問題，它只佔了12 K位元組，儲存在3個3 cookies裡。)

   

    簡而言之，注意保持cookie簡單。不要依賴cookies的存在，不要在每個cookie裡儲存太多資訊。不要儲存太多的cookes。但是，拋除這些限制，在技巧高超的WEB管理員手裡，cookie的概念是一個有用的工具。

   

    外部連結

    每個 Javascript 程式員都應當有一份Javascript： David Flanagan 的The Definitive Guide。 這本書裡找到cookie 類常式可以協助你把不止一個變數編碼到單一的cookie，克服掉“每個WEB伺服器20 個cookies的限制”。請點擊這個連結下載該常式，ftp://ftp.oreilly.com/pub/examples/nutshell /javascript/。

js讀取asp寫的中文cookie內容的亂碼處理

    js可以在用戶端本地讀寫cookie，但是伺服器端asp代碼寫的cookie中文內容，如果本地用js讀取的話，可能出現亂碼。js看來還不是很成熟，不夠智能，以前也遇到過很多地方js處理中文亂碼問題了。
   
    先來看下如何用js讀取cookie內容，為了方便，直接帖個js讀取 cookie的函數代碼
   
function getCookie(objName) {<br /> var arrStr = document.cookie.split("; ");<br /> for (var i = 0; i < arrStr.length; i++) {<br /> var temp = arrStr[i].split("=");<br /> if (temp[0] == objName) return unescape(temp[1]);<br /> }<br /> }
   
    通過如上js函數即可讀取cookie內容了，然後是亂碼問題，對js讀取出來的cookie要進行編碼處理還原成真正的中文內容，通過 decodeURIComponent 和escape函數，這是js本身的系統函數。範例程式碼如下
   
    var n = getCookie('name'); //讀取cookie內容
    n = decodeURIComponent (escape(n)); //處理編碼問題
   
    n就是獲得的處理過亂碼的結果了，實際上也可以將亂碼處理的那句代碼直接寫道讀取cookie的函數裡