[JS]Cookie精通之路

walb呀發表於2017-12-07
JSCookie
<!—Cookies，有些人喜歡它們，有些人憎恨它們。但是，很少有人真正知道如何使用它們。現在你可以成為少數人中的成員－可以自傲的Cookie 大師。–>
如果你象作者一樣記性不好，那麼你可能根本記不住人們的名字。我遇到人時，多半隻是點點頭，問句“吃了嘛！”，而且期望問候到此為止。如果還需要表示些什麼，那麼我就得求助於一些狡猾的技巧，好讓我能想對方是誰。比如胡扯起一些和對方有關的人，不管他們之間關係多遠，只要能避免不記得對方名字的尷尬就好： “你隔壁鄰居的侄子的可愛小狗邁菲斯特怎麼樣？”通過這個方法，我希望能讓對方感到，我確實很重視他（她），甚至還記得這些瑣事，雖然實際上連名字都忘記了。但是，不是我不重視，而是我的記憶力實在是糟糕，而且要記住的名字又實在太多。如果我能給每個人設定cookies，那麼我就不會再犯這種記憶力問題了。
在這篇文章裡，我們要學習：
1. 什麼是 Cookies?
2. Cookie 的構成
3. 操縱 Cookies
4. Cookie 怪獸
什麼是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() 的構造器設定以毫秒為單位
// .getTime() 方法返回時間，單位為毫秒
// 所以要設定15分鐘到期，要用60000毫秒乘15分鐘
var expiration = new Date((new Date()).getTime() + 15 * 60000);
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值。
function getCookie(cookie_name)
｛
var allcookies = document.cookie;
var cookie_pos = allcookies.indexOf(cookie_name);
// 如果找到了索引，就代表cookie存在，
// 反之，就說明不存在。
if (cookie_pos != -1)
｛
// 把cookie_pos放在值的開始，只要給值加1即可。
cookie_pos += cookie_name.length + 1;
var cookie_end = allcookies.indexOf(“;”, cookie_pos);
if (cookie_end == -1)
｛
cookie_end = allcookies.length;
｝
var value = unescape(allcookies.substring(cookie_pos, cookie_end));
｝
return value;
｝
// 呼叫函式
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]Cookie精通之路，如需轉載請自行聯絡原博主。


相關文章