對於前端開發者來說，快取是大家都耳熟能詳的一個知識點，但是經常在面試的過中，稍微深入詢問的時候，就會出現知識點混亂，比如常見的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來說，其主要包含四個屬性，分別如下：

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 一樣，但是瀏覽器關閉後，資料依然會一直存在

三者的具體對比如下：

因此，根據合理的情況進行使用對應的儲存，才能能達到更加有效的效果。