web前端學習教程:Cookie會話跟蹤技術

千鋒HTML5學院發表於2019-05-15


  1. Cookie會話跟蹤技術介紹

  會話跟蹤是Web程式中常用的技術,用來跟蹤使用者的整個會話。常用的會話跟蹤技術是Cookie與Session。Cookie透過在客戶端記錄資訊確定使用者身份,可以在客戶端儲存臨時資料.

  Cookie 技術誕生以來,它就成了廣大網路使用者和 Web 開發人員爭論的一個焦點。有一些網路使用者,甚至包括一些資深的 Web 專家也對它的產生和推廣感到不滿,這並不是因為 Cookie 技術的功能太弱或其他技術效能上的原因,而是因為 Cookie 的使用對網路使用者的隱私構成了危害。因為 Cookie 是由 Web 伺服器儲存在使用者瀏覽器上的小文字檔案,它包含有關使用者的資訊.

  Cookie 技術產生源於 HTTP 協議在網際網路上的急速發展。隨著網際網路的深層次發展,頻寬等限制不存在了,人們需要更復雜的網際網路互動活動,就必須同伺服器保持活動狀態。於是,在瀏覽器發展初期,為了適應使用者的需求,技術上推出了各種保持 Web 瀏覽狀態的手段,其中就包括了 Cookie 技術。1993 年,網景公司僱員 Lou Montulli 為了讓使用者在訪問某網站時,進一步提高訪問速度,同時也為了進一步實現個人化網路,發明了今天廣泛使用的 Cookie.

  Cookie 是在 HTTP 協議下,伺服器或指令碼可以維護客戶工作站上資訊的一種方式。Cookie 是由 Web 伺服器儲存在使用者瀏覽器(客戶端)上的小文字檔案,它可以包含有關使用者的資訊。無論何時使用者連結到伺服器,Web 站點都可以訪問 Cookie 資訊

  目前有些 Cookie 是臨時的,有些則是持續的。臨時的 Cookie 只在瀏覽器上儲存一段規定的時間,一旦超過規定的時間,該 Cookie 就會被系統清除

  持續的 Cookie 則儲存在使用者的 Cookie 檔案中,下一次使用者返回時,仍然可以對它進行呼叫。在 Cookie 檔案中儲存 Cookie,有些使用者擔心 Cookie 中的使用者資訊被一些別有用心的人竊取,而造成一定的損害。其實,網站以外的使用者無法跨過網站來獲得 Cookie 資訊。如果因為這種擔心而遮蔽 Cookie,肯定會因此拒絕訪問許多站點頁面。因為,當今有許多 Web 站點開發人員使用 Cookie 技術,例如 Session 物件的使用就離不開 Cookie 的支援.

  會話跟蹤技術是用於維持客戶端和伺服器端通訊資訊的技術, 而Cookie是其中的一種會話跟蹤技術;

  Cookie是在http協議下,伺服器或指令碼可以維護客戶端資訊的一種方式,

  Cookie儲存在客戶端,通常儲存在瀏覽器的Cookie臨時資料夾中,可以手動刪除,

  當使用者訪問伺服器時,伺服器可以設定和訪問cookie的資訊

  Cookie利用了網頁程式碼中的HTTP頭資訊進行傳遞的,瀏覽器的每一次網頁請求,都可以伴隨Cookie傳遞

  2. Cookie的機制

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

  而Web應用程式是使用HTTP協議傳輸資料的。HTTP協議是無狀態的協議。一旦資料交換完畢,客戶端與伺服器端的連線就會關閉,再次交換資料需要建立新的連線。這就意味著伺服器無法從連線上跟蹤會話。即使用者A購買了一件商品放入購物車內,當再次購買商品時伺服器已經無法判斷該購買行為是屬於使用者A的會話還是使用者B的會話了。要跟蹤該會話,必須引入一種機制。

  由於HTTP是一種無狀態的協議,伺服器單從網路連線上無從知道客戶身份。怎麼辦呢?就給客戶端們頒發一個通行證吧,每人一個,無論誰訪問都必須攜帶自己通行證。這樣伺服器就能從通行證上確認客戶身份了。這就是Cookie的工作原理。

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

   4edbc74c524a4f46872a152410b501e4.png

  Cookie在你瀏覽網頁的時候,網站伺服器放在客戶端(Client End,就是你的電腦)裡面的一個小小的TXT檔案。這個檔案裡面儲存了一些與你訪問的這個網站有關的一些東西,當你下一次訪問這個網站的時候,Cookie就會記住你上次訪問時候的一些狀態或者設定,讓伺服器針對性的傳送頁面的相關內容。Cookie裡面包含的資訊並沒有一個標準的格式,各個網站伺服器的規範都可能不同,但一般會包括:所訪問網站的域名(domain name),訪問開始的時間,訪問者的IP地址等客戶端資訊,訪問者關於這個網站的一些設定等等。比如,你設定的諸如Google一個頁面要顯示幾條搜尋結果之類的資訊,即使你不登入你的Google賬號,你下次訪問時也能夠儲存下來,這就是上次你訪問時把相關資訊放入了Cookie的效果。如果是線上購物網站,還記錄了一些你的購物車,儲物架以及你的賬戶名等資訊。另外有些網站則會透過Cookie把你的登入賬號和密碼記下來,這樣你下次開啟瀏覽器就會自動登入。

  當然,如果你在系統資料夾中開啟Cookie的TXT檔案,你並不會看到這些資訊而只能看到一串亂七八糟的字元,因為為了安全起見,Cookie的內容一般都是加密的,只有對應的伺服器才能讀懂。另外,由於Cookie只是TXT檔案,而不是程式,更不是病毒,不能自己執行,不會對作業系統和其他任何計算機程式產生影響,也不會透過網際網路傳播,因此它對網際網路安全實際上不構成威脅。

  對於網站分析而言,Cookie的作用在於幫助嵌入程式碼類的網站分析工具記錄網站的訪問(Visit)和訪問者(Unique Visitor)的資訊,沒有Cookie就無法實現相關監測。而透過伺服器端Log來進行網站分析的軟體則不需要Cookie也能實現相關分析,因此 Cookie只對嵌入程式碼類工具有效。那些你耳熟能詳的工具——Google Analytics、Omniture、HBX、WebTrends(嵌入程式碼版)等等,都需要在網站訪問者的電腦上放置Cookie才能實現監測。

  3.Cookie如何使用

  在JavaScript語言中,我們使用document.cookie: 獲取/設定cookie

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

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

  4.Cookie的應用場景

  4.1 自動登入

  4.2電商購物車功能

  4.3 記錄使用者登入網址的次數

  4.4 商品瀏覽記錄

  5.電商購物車案例

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

  在商品詳情介面, 我們可以點選加入購物車按鈕, 將商品新增到購物車中, 該加入購物車的商品資料實際儲存在Cookie中, 商品詳情頁面如下圖:

   735e7bbd1d3b43e288357434aaa32478.png

  個商品到購物車後, 我們可以前往我的購物車中檢視購物車中的商品,這些商品資料我們都是從cookie中獲取的, 如下圖:

   0047073ec4514e71bf069b9b8f2d38a8.png

  購物車商品顯示後我們可以繼續對購物車中的每個商品進行操作, 如數量的增減, 商品刪除, 價格統計, 批次刪除, 全選等操作, 如下圖可以對商品進行刪除, 在刪除的同時我們也會對Cookie中的資料進行同步更改.

   ff03c99a5c8b4a488bc226c504746244.png


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69917019/viewspace-2644518/,如需轉載,請註明出處,否則將追究法律責任。

相關文章