HTML5技術之Cookie會話跟蹤技術

一、Cookie會話跟蹤技術介紹

會話跟蹤是Web程序中常用的一種技術，用來跟蹤用戶的整個會話,常用的會話跟蹤技術有Cookie與Session,Session一般用在伺服器端,而Cookie一般使用在客戶端,可以在客戶端保存臨時數據, 那這裡我們要重點介紹Cookie會話跟蹤技術。

Cookie會話跟蹤技術一直以來都是廣大網路用戶和Web開發人員使用較多的一種功能和技術, Cookie會話跟蹤技術產生也是由於HTTP協議在互聯網上的快速發展, 互聯網的發展帶動了Cookie在瀏覽器中的廣泛使用,並越來越受到歡迎。Cookie會話跟蹤技術是在HTTP協議下，伺服器或腳本可以維護客戶工作站上信息的一種方式, 一般Cookie較多的存儲在客戶端,是由Web 伺服器保存在用戶瀏覽器（客戶端）上的小文本文件，它可以包含有關用戶的信息,信息量一般不會太大, 它只能保存少量的文本信息,無論何時用戶鏈接到伺服器,Web 站點都可以訪問 Cookie 信息。

二、Cookie的機制

在程序中，會話跟蹤是很重要的事情。理論上，一個用戶的所有請求操作都應該屬於同一個會話，而另一個用戶的所有請求操作則應該屬於另一個會話，二者不能混淆。

Cookie實際上是一小段的文本信息。客戶端請求伺服器，如果伺服器需要記錄該用戶狀態，就使用response向客戶端瀏覽器頒發一個Cookie。客戶端瀏覽器會把Cookie保存起來。當瀏覽器再請求該網站時，瀏覽器把請求的網址連同該Cookie一同提交給伺服器。伺服器檢查該Cookie，以此來辨認用戶狀態。伺服器還可以根據需要修改Cookie的內容。

Cookie在你瀏覽網頁的時候，網站伺服器放在客戶端裡面的一個小小的TXT文件。這個文件裡面存儲了一些與你訪問的這個網站有關的一些東西，當你下一次訪問這個網站的時候，Cookie就會記住你上次訪問時候的一些狀態或者設置，讓伺服器針對性的發送頁面的相關內容。Cookie裡面包含的信息並沒有一個標準的格式，各個網站伺服器的規範都可能不同，但一般會包括：所訪問網站的域名，訪問開始的時間，訪問者的IP地址等客戶端信息，訪問者關於這個網站的一些設置等等。比如，你設置的諸如百度一個頁面要顯示幾條搜索結果之類的信息，即使你不登錄你的百度賬號，你下次訪問時也能夠保存下來，這就是上次你訪問時把相關信息放入了Cookie的效果。如果是在線購物網站，還記錄了一些你的購物車，儲物架以及你的賬戶名等信息。另外有些網站則會通過Cookie把你的登錄賬號和密碼記下來，這樣你下次打開瀏覽器就會自動登錄。

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

三、Cookie的利弊

Cookie雖然在持久保存客戶端數據提供了方便，分擔了伺服器存儲的負擔，但還是有很多局限性的。

第一: 每個特定的域名下生成的Cookie數量有限制

1、IE6或更低版本最多20個Cookie

2、IE7和之後的版本最後可以有50個Cookie

3、Firefox最多50個Cookie

4、chrome和Safari沒有做硬性限制

IE和Opera會清理近期最少使用的Cookie，Firefox會隨機清理Cookie。

第二: Cookie的最大大約為4096位元組，為了兼容性，一般不能超過4095位元組。

Cookie的優缺點

Cookie的優點：極高的擴展性和可用性

1、通過良好的編程，控制保存在Cookie中的Session對象的大小。

2、通過加密和安全傳輸技術（SSL），減少Cookie被破解的可能性。

3、只在Cookie中存放不敏感數據，即使被盜也不會有重大損失。

4、控制Cookie的生命期，使之不會永遠有效。偷盜者很可能拿到一個過期的Cookie。

Cookie的缺點：

1、Cookie數量和長度的限制。每個domain最多只能有20條Cookie，每個Cookie長度不能超過4KB，否則會被截掉。

2、安全性問題。如果Cookie被人攔截了，那人就可以取得所有的Session信息。即使加密也與事無補，因為攔截者並不需要知道Cookie的意義，他只要原樣轉發Cookie就可以達到目的了。

3、有些狀態不可能保存在客戶端。例如，為了防止重複提交表單，我們需要在伺服器端保存一個計數器。如果我們把這個計數器保存在客戶端，那麼它起不到任何作用。

四、Cookie如何使用

在JavaScript語言中,我們使用document。cookie: 獲取/設置Cookie

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

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

五、Cookie的應用場景

4、1 自動登錄

4、2電商購物車功能

4、3 記錄用戶登錄網址的次數

4、4 商品瀏覽記錄

六、電商購物車案例

在瀏覽器本地實現購物車功能

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

添加多個商品到購物車後, 我們可以前往我的購物車中查看購物車中的商品,這些商品數據我們都是從Cookie中獲取的, 如下圖:

聯繫我們：

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！