對於前端開發者來說，緩存是大家都耳熟能詳的一個知識點，但是經常在面試的過中，稍微深入詢問的時候，就會出現知識點混亂，比如常見的http緩存，本地存儲，cookie的使用。下面分別就這三個方面具體闡述，以此來鞏固大家的知識體系。
一、cookie
1、cookie是什么？
HTTP協議本身是無狀態的。什么是無狀態呢，即服務器無法判斷用戶身份。Cookie實際上是一小段的文本信息（key-value格式）。客戶端向服務器發起請求，如果服務器需要記錄該用戶狀態，就在請求的響應中向客戶端瀏覽器頒發一個Cookie。客戶端瀏覽器會把Cookie保存起來。當瀏覽器再請求該網站時，瀏覽器把請求的網址連同該Cookie一同提交給服務器。服務器檢查該Cookie，以此來辨認用戶狀態。
當然，對於cookie來說，其實就是存儲在客戶端（如：瀏覽器）中的一段特殊的鍵值對形式的字符串，可以直接使用document.cookie來進行獲取和設置相關的cookie信息。
2、cookie的運行機制是什么？
當用戶第一次訪問並登陸一個網站的時候，cookie的設置以及發送會經歷以下4個步驟：客戶端發送一個請求到服務器->服務器發送一個HttpResponse響應到客戶端，其中包含Set-Cookie的頭部 -> 客戶端保存cookie，之后向服務器發送請求時，HttpRequest請求中會包含一個Cookie的頭部 ->服務器返回響應數據.
document.cookie屬性看起來像一個普通的文本字符串，其實它不是。即使您在 document.cookie 中寫入一個完整的 cookie 字符串, 當您重新讀取該 cookie 信息時，cookie 信息是以名/值對的形式展示的。如果您設置了新的 cookie，舊的 cookie 不會被覆蓋。如果key的名稱一致，則會進行覆蓋之前的value。
3、cookie的具體屬性及用途？
對於document.cookie來說，其主要包含四個屬性，分別如下：
| 屬性名稱 | 屬性的的用途 | 注意事項 |
|---|---|---|
| NAME=VALUE | 鍵值對，可以設置要保存的 Key/Value | NAME 不能和其他屬性項的名字一樣，否則不是新建而是覆蓋之前同名的內容 |
| Expires | 設置對應cookie的失效時間，單位為s，即在該時間后就會失效被客戶端刪除 | Cookie中通過getMaxAge()和setMaxAge(int maxAge)來讀寫該屬性。maxAge有3種值，分別為正數，負數和0，具體表示：正數表示失效時間，當maxAge屬性為負數，則表示該Cookie只是一個臨時Cookie，不會被持久化，僅在本瀏覽器窗口或者本窗口打開的子窗口中有效，關閉瀏覽器后該Cookie立即失效，當maxAge為0時，表示立即刪除Cookie |
| Domain | 生成該 Cookie 的域名 | 在該域名下可以使用cookie |
| Path | 設置cookie有效的具體路徑，一般默認為/，表示根目錄下的頁面都有權利操作cookie | |
| Secure | 安全模式下傳輸cookie信息 | 如果設置了這個屬性，那么只會在 SSH 連接時才會回傳該 Cookie |
4、cookie方法的封裝
對於cookie來說，沒有自身的內置方法，如果對cookie進行操作，則需要對document.cookie直接進行操作，目前常用的cookie插件都是進行的封裝，具體封裝如下：
寫cookies
function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); } 讀取cookies
function getCookie(name) { var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); if(arr=document.cookie.match(reg)) return unescape(arr[2]); else return null; } 刪除cookies
function delCookie(name) { var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval=getCookie(name); if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString(); }
二、本地存儲
本地存儲是htmlu引入的一項新技術，主要包括localStorage和SessionStorage兩類。具體詳見如下：
1、內置方法
localStorage和sessionStorage兩者都是掛載在window對象下的兩個屬性，其擁有一樣的內置方法，分別為：
getItem():獲取存儲的信息,
setItem():創建或者修改存儲的信息,
removeItem()：刪除某一個存儲的信息,
clear()：清空所有的存儲信息2、使用場景：
Web應用允許使用瀏覽器提供的API實現將數據存儲到用戶電腦上。這樣客戶端存儲遵循“同源策略”，因此不同站點的頁面是無法相互讀取對方存儲的數據，而同一站點的不同頁面之間是可以相互共享存儲數據的，它為我們提供了一種通信機制，例如，一個頁面填寫的表單數據可以顯示在另一個頁面中。Web應用可以選擇存儲數據的有效期：臨時存儲可以讓數據保存至當前窗口關閉或者瀏覽器退出；永久存儲可以將數據永久存儲在硬盤上。客戶端存儲的方式之一就是Web存儲
三、web緩存
1. web緩存主要有：數據庫緩存、服務器緩存（代理服務器緩存、CDN緩存），瀏覽器緩存
2. 瀏覽器緩存包括：http緩存、cookie緩存、local storage本地緩存
3. http緩存的幾個術語：1）緩存命中率：從緩存中得到的數據請求數與所有請求數的比例。比例越高緩存越好 性能越好；2）過期內容：超過設置的有效期的內容，這些內容需要重新從服務器請求新數據或者需要在服務器驗證內容是否修改（如果修改服務器更新失效時間，並且返回最新內容進行緩存，同時返回狀態碼為200，如果沒有修改，服務器直接返回狀態碼304，3）驗證：向服務器發送請求，驗證過期內容是否有效，有效則直接返回304並刷新緩存失效時間；4）失效：把失效的緩存內容清除；
4.http緩存設置：通過設置html的meta來控制頁面緩存，具體實例如下：
<meta http-equiv=“Cache-control” content=“no-cache,max-age,must-revalidate,no-store”> <meta http-equiv=“Pragma” content=“no-cache”> <meta http-equiv=“Expires” content=“0”> <meta http-equiv=“Cache” content=“no-cache”>5. 瀏覽器緩存分為強緩存和協商緩存，其具體加載頁面流出如下：1）瀏覽器先根據http的請求頭信息來判斷是否命中強緩存，如果命中強緩存則直接加載緩存中的資源，不會去服務器請求新的資源；2）如果未命中強緩存，則會向服務器發送資源請求，服務器會直接驗證相關的請求的資源是否在瀏覽器本地緩存失效，如果沒有失效，則服務器不會返回資源信息，此時的狀態碼為304，瀏覽器直接從緩存中獲取資源；3）如果未命中協商緩存，即服務器校驗發現瀏覽器本地緩存內容失效，則返回新的請求資源並更新瀏覽器的緩存，此時的狀態碼為200
6. 屬性的具體講解：
1）Cache-control：是一個相對時間，與客戶端時間進行比較，從而來判斷緩存是否失效，具體包括：max-age 最大失效時間，即在該時間內緩存都有效，單位為s，設置了max-age=0時，獲取資源之前都需要先校驗Etag和Last-modify，來判斷資源是否進行修改，如果未修改服務器直接返回304，no-cache強制使用緩存前必須發送資源請求到服務器進行校驗本地緩存是否有效；no-store 禁止使用緩存資源，必須去服務器請求新的資源；public 表示響應可以被任何對象（客戶端、代理服務器 等）緩存；private 只能被單個對象（如操作系統等用戶，瀏覽器）緩存，不能被代理服務器緩存；must-revalidate 告訴瀏覽器或者緩存服務器 在本地文件過期之前使用本地文件，本地文件一旦過期就要去服務器進行文件檢驗，如果服務器檢驗維修改則直接返回304（目前不常用）
2）Expires 響應頭過期時間，需要和Last-modify一起使用，優先級低於Cache-control；Expires是以絕對時間，如果客戶端時間更改則會導致客戶端與服務器時間差造成緩存失效，因此才引入Cache-control
3）Pragma：用於向后兼容http1.0協議的緩存服務器，那時候的http1.1協議中還沒有Cache-control
4）Last-Modified / If-Modified-Since：
瀏覽器第一次請求服務器資源的時候，服務器返回的響應頭（response）中會加上Last-Modified，其是一個時間標示，表示資源的失效時間
當瀏覽器再次請求該資源的時候 請求頭（request）中會帶有If-Modified-Sinxe，其值就為緩存是的Last-Modified的值，去服務器進行校驗緩存是否失效，未失效返回304，失效返回新的資源並更新緩存
缺點：1）Last-Modified的時間只能精確到秒，如果在一秒內多次修改則無法判斷資源被修改；2）如果文件被定時生成 並為改變內容時，緩存會失效；3）服務器沒有獲取到最新的修改時間造成資源無法更新。因此引入了ETag。
5）ETag / If-None-Match：
瀏覽器第一次請求服務器資源的時候，服務器返回的響應頭（response）會帶有ETag表示符，當瀏覽器再次請求時會在請求頭加上If-None-Match，其值就為緩存時的ETag的值。Last-Modified和ETag可以同時使用，但ETag的優先級較高，會先比較ETag，如果相同才會去比較Last-Modified，最終由服務器決定是否返回304
資源搜索網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com
四、cookie，sessionStroage，localstorage區別
面試中，經常會將三者放在一起進行對比，具體來闡述他們的相同點和 不同點：cookie的大小限制為4KB左右。它的主要用途有保存登錄信息，比如你登錄某個網站市場可以看到“記住密碼”，這通常就是通過在 Cookie 中存入一段辨別用戶身份的數據來實現的。
sessionStorage（臨時存儲） ：為每一個數據源維持一個存儲區域，在瀏覽器打開期間存在，包括頁面重新加載
localStorage（長期存儲） ：與 sessionStorage 一樣，但是瀏覽器關閉后，數據依然會一直存在
三者的具體對比如下：
因此，根據合理的情況進行使用對應的存儲，才能能達到更加有效的效果。