首先要知道的是使用浏覽器的開發人員工具，然後在浏覽器運作後按 F12
浏覽器的緩存機制提供了一種在用戶端存儲使用者資料的方法，并且可以使用 Cookie、會話等與服務端進行互動。
1. 餅幹和會話
Cookie 和會話都是跟蹤浏覽器使用者身份的會話。
區分：
1、保持狀态：cookie儲存在浏覽器端，會話儲存在伺服器端
2、應用場景：
Cookie：（1）确定使用者是否已登入網站，以便下次登入時可以自動登入（或記住密碼）。如果我們删除cookie，我們必須在每次登入時重新填寫有關登入的資訊。
（2） 儲存上次登入時間等資訊。
（3） 儲存上次檢視的頁面
（4） 浏覽次數
session：Session 用于儲存每個使用者的私人資訊，變量的值儲存在伺服器端，以便通過 SessionID 區分不同的客戶。
（1）網上商城中的購物車
（2）儲存使用者登入資訊
（3）将一些資料放入會話中，供同一使用者的不同頁面使用
（4）防止使用者非法登入
HTML5 的本地存儲
解釋一
關于HTML5中的本地存儲的兩個重要方面：Web存儲和本地資料庫。其中，Web存儲機制是對HTML4中cookie存儲機制的改進。由于 cookie 存儲機制的許多缺點，HTML5 不再使用它，而是使用改進的 Web 存儲機制。本地資料庫是HTML5中的一項新功能，它允許您在用戶端本地建構資料庫，并且必須儲存在伺服器端資料庫中的内容現在可以直接儲存在用戶端，進而大大減輕了伺服器端的負擔并加快了對資料的通路速度。
本文重點介紹 Web 存儲
我們知道 Cookie 可以在 HTML4 中用于在用戶端存儲簡單的使用者資訊，例如使用者名，但從長遠來看，您會發現使用 Cookie 存儲持久性資料存在幾個問題：
1. 大小：餅幹的大小限制為4KB。
2. 帶寬：Cookie 是與 HTTP 事務一起發送的，是以用于發送 Cookie 的部分帶寬被浪費了。
3.複雜性：很難正确操作cookie。
為了解決這些問題，HTML5 重新提供了一項功能，該功能将資料存儲在用戶端本地，即 Web 存儲。
具體而言，Web 存儲分為兩種不同的類型：
1. 會話存儲：将資料儲存在會話對象中。所謂會話是指使用者在浏覽一個網站時，從進入網站到浏覽器關閉的時間，即使用者浏覽該網站所花費的時間。會話對象可用于儲存在此期間需要儲存的任何資料。
2.localStorage：将資料儲存在用戶端的本地硬體裝置（通常是硬碟或其他硬體裝置）上，即使浏覽器關閉，資料仍将存在，下次打開浏覽器通路網站時可以繼續使用。
兩者之間的差別在于會話存儲是臨時儲存的，而本地存儲是永久儲存的。
到目前為止，Firefox 3.6，Chrome 6，Safari 5，Pera 10.50和IE8以上的浏覽器支援使用SessionStorage和Los Storage。