web前端學習教程：Cookie會話跟蹤技術(shù)

　　1. Cookie會話跟蹤技術(shù)介紹

　　會話跟蹤是Web程序中常用的技術(shù)，用來跟蹤用戶的整個會話。常用的會話跟蹤技術(shù)是Cookie與Session。Cookie通過在客戶端記錄信息確定用戶身份,可以在客戶端保存臨時數(shù)據(jù).

　　Cookie 技術(shù)誕生以來，它就成了廣大網(wǎng)絡(luò)用戶和 Web 開發(fā)人員爭論的一個焦點。有一些網(wǎng)絡(luò)用戶，甚至包括一些資深的 Web 專家也對它的產(chǎn)生和推廣感到不滿，這并不是因為 Cookie 技術(shù)的功能太弱或其他技術(shù)性能上的原因，而是因為 Cookie 的使用對網(wǎng)絡(luò)用戶的隱私構(gòu)成了危害。因為 Cookie 是由 Web 服務(wù)器保存在用戶瀏覽器上的小文本文件，它包含有關(guān)用戶的信息.

　　Cookie 技術(shù)產(chǎn)生源于 HTTP 協(xié)議在互聯(lián)網(wǎng)上的急速發(fā)展。隨著互聯(lián)網(wǎng)的深層次發(fā)展，帶寬等限制不存在了，人們需要更復雜的互聯(lián)網(wǎng)交互活動，就必須同服務(wù)器保持活動狀態(tài)。于是，在瀏覽器發(fā)展初期，為了適應用戶的需求，技術(shù)上推出了各種保持 Web 瀏覽狀態(tài)的手段，其中就包括了 Cookie 技術(shù)。1993 年，網(wǎng)景公司雇員 Lou Montulli 為了讓用戶在訪問某網(wǎng)站時，進一步提高訪問速度，同時也為了進一步實現(xiàn)個人化網(wǎng)絡(luò)，發(fā)明了今天廣泛使用的 Cookie.

　　Cookie 是在 HTTP 協(xié)議下，服務(wù)器或腳本可以維護客戶工作站上信息的一種方式。Cookie 是由 Web 服務(wù)器保存在用戶瀏覽器(客戶端)上的小文本文件，它可以包含有關(guān)用戶的信息。無論何時用戶鏈接到服務(wù)器，Web 站點都可以訪問 Cookie 信息

　　目前有些 Cookie 是臨時的，有些則是持續(xù)的。臨時的 Cookie 只在瀏覽器上保存一段規(guī)定的時間，一旦超過規(guī)定的時間，該 Cookie 就會被系統(tǒng)清除

　　持續(xù)的 Cookie 則保存在用戶的 Cookie 文件中，下一次用戶返回時，仍然可以對它進行調(diào)用。在 Cookie 文件中保存 Cookie，有些用戶擔心 Cookie 中的用戶信息被一些別有用心的人竊取，而造成一定的損害。其實，網(wǎng)站以外的用戶無法跨過網(wǎng)站來獲得 Cookie 信息。如果因為這種擔心而屏蔽 Cookie，肯定會因此拒絕訪問許多站點頁面。因為，當今有許多 Web 站點開發(fā)人員使用 Cookie 技術(shù)，例如 Session 對象的使用就離不開 Cookie 的支持.

　　會話跟蹤技術(shù)是用于維持客戶端和服務(wù)器端通信信息的技術(shù), 而Cookie是其中的一種會話跟蹤技術(shù);

　　Cookie是在http協(xié)議下，服務(wù)器或腳本可以維護客戶端信息的一種方式,

　　Cookie保存在客戶端，通常保存在瀏覽器的Cookie臨時文件夾中，可以手動刪除,

　　當用戶訪問服務(wù)器時，服務(wù)器可以設(shè)置和訪問cookie的信息

　　Cookie利用了網(wǎng)頁代碼中的HTTP頭信息進行傳遞的，瀏覽器的每一次網(wǎng)頁請求，都可以伴隨Cookie傳遞

　　2. Cookie的機制

　　在程序中，會話跟蹤是很重要的事情。理論上，一個用戶的所有請求操作都應該屬于同一個會話，而另一個用戶的所有請求操作則應該屬于另一個會話，二者不能混淆。例如，用戶A在超市購買的任何商品都應該放在A的購物車內(nèi)，不論是用戶A什么時間購買的，這都是屬于同一個會話的，不能放入用戶B或用戶C的購物車內(nèi)，這不屬于同一個會話。

　　而Web應用程序是使用HTTP協(xié)議傳輸數(shù)據(jù)的。HTTP協(xié)議是無狀態(tài)的協(xié)議。一旦數(shù)據(jù)交換完畢，客戶端與服務(wù)器端的連接就會關(guān)閉，再次交換數(shù)據(jù)需要建立新的連接。這就意味著服務(wù)器無法從連接上跟蹤會話。即用戶A購買了一件商品放入購物車內(nèi)，當再次購買商品時服務(wù)器已經(jīng)無法判斷該購買行為是屬于用戶A的會話還是用戶B的會話了。要跟蹤該會話，必須引入一種機制。

　　由于HTTP是一種無狀態(tài)的協(xié)議，服務(wù)器單從網(wǎng)絡(luò)連接上無從知道客戶身份。怎么辦呢?就給客戶端們頒發(fā)一個通行證吧，每人一個，無論誰訪問都必須攜帶自己通行證。這樣服務(wù)器就能從通行證上確認客戶身份了。這就是Cookie的工作原理。

　　Cookie實際上是一小段的文本信息?？蛻舳苏埱蠓?wù)器，如果服務(wù)器需要記錄該用戶狀態(tài)，就使用response向客戶端瀏覽器頒發(fā)一個Cookie。客戶端瀏覽器會把Cookie保存起來。當瀏覽器再請求該網(wǎng)站時，瀏覽器把請求的網(wǎng)址連同該Cookie一同提交給服務(wù)器。服務(wù)器檢查該Cookie，以此來辨認用戶狀態(tài)。服務(wù)器還可以根據(jù)需要修改Cookie的內(nèi)容。

　　Cookie在你瀏覽網(wǎng)頁的時候，網(wǎng)站服務(wù)器放在客戶端(Client End，就是你的電腦)里面的一個小小的TXT文件。這個文件里面存儲了一些與你訪問的這個網(wǎng)站有關(guān)的一些東西，當你下一次訪問這個網(wǎng)站的時候，Cookie就會記住你上次訪問時候的一些狀態(tài)或者設(shè)置，讓服務(wù)器針對性的發(fā)送頁面的相關(guān)內(nèi)容。Cookie里面包含的信息并沒有一個標準的格式，各個網(wǎng)站服務(wù)器的規(guī)范都可能不同，但一般會包括：所訪問網(wǎng)站的域名(domain name)，訪問開始的時間，訪問者的IP地址等客戶端信息，訪問者關(guān)于這個網(wǎng)站的一些設(shè)置等等。比如，你設(shè)置的諸如Google一個頁面要顯示幾條搜索結(jié)果之類的信息，即使你不登錄你的Google賬號，你下次訪問時也能夠保存下來，這就是上次你訪問時把相關(guān)信息放入了Cookie的效果。如果是在線購物網(wǎng)站，還記錄了一些你的購物車，儲物架以及你的賬戶名等信息。另外有些網(wǎng)站則會通過Cookie把你的登錄賬號和密碼記下來，這樣你下次打開瀏覽器就會自動登錄。

　　當然，如果你在系統(tǒng)文件夾中打開Cookie的TXT文件，你并不會看到這些信息而只能看到一串亂七八糟的字符，因為為了安全起見，Cookie的內(nèi)容一般都是加密的，只有對應的服務(wù)器才能讀懂。另外，由于Cookie只是TXT文件，而不是程序，更不是病毒，不能自己運行，不會對操作系統(tǒng)和其他任何計算機程序產(chǎn)生影響，也不會通過互聯(lián)網(wǎng)傳播，因此它對互聯(lián)網(wǎng)安全實際上不構(gòu)成威脅。

　　對于網(wǎng)站分析而言，Cookie的作用在于幫助嵌入代碼類的網(wǎng)站分析工具記錄網(wǎng)站的訪問(Visit)和訪問者(Unique Visitor)的信息，沒有Cookie就無法實現(xiàn)相關(guān)監(jiān)測。而通過服務(wù)器端Log來進行網(wǎng)站分析的軟件則不需要Cookie也能實現(xiàn)相關(guān)分析，因此 Cookie只對嵌入代碼類工具有效。那些你耳熟能詳?shù)墓ぞ摺狦oogle Analytics、Omniture、HBX、WebTrends(嵌入代碼版)等等，都需要在網(wǎng)站訪問者的電腦上放置Cookie才能實現(xiàn)監(jiān)測。

　　3.Cookie如何使用

　　在JavaScript語言中,我們使用document.cookie: 獲取/設(shè)置cookie

　　格式為: name=value;[expires=過期時間];[path=訪問路徑];[domain=域名];[secure]

　　如: document.cookie = "username=zhangsan";

　　4.Cookie的應用場景

　　4.1 自動登錄

　　4.2電商購物車功能

　　4.3 記錄用戶登錄網(wǎng)址的次數(shù)

　　4.4 商品瀏覽記錄

　　5.電商購物車案例

　　在瀏覽器本地實現(xiàn)購物車功能

　　在商品詳情界面, 我們可以點擊加入購物車按鈕, 將商品添加到購物車中, 該加入購物車的商品數(shù)據(jù)實際保存在Cookie中, 商品詳情頁面如下圖:

　　個商品到購物車后, 我們可以前往我的購物車中查看購物車中的商品,這些商品數(shù)據(jù)我們都是從cookie中獲取的, 如下圖:

　　購物車商品顯示后我們可以繼續(xù)對購物車中的每個商品進行操作, 如數(shù)量的增減, 商品刪除, 價格統(tǒng)計, 批量刪除, 全選等操作, 如下圖可以對商品進行刪除, 在刪除的同時我們也會對Cookie中的數(shù)據(jù)進行同步更改.