前端常見面試-存儲/緩存篇

        前面文章專門對前端面試中css常見的考覈知識點作了相關的梳理，你們須要的課自行查看上一篇文章：前端常見面試-css篇
        對於前端開發者來講，緩存是你們都耳熟能詳的一個知識點，可是常常在面試的過中，稍微深刻詢問的時候，就會出現知識點混亂，好比常見的http緩存，本地存儲，cookie的使用。下面分別就這三個方面具體闡述，以此來鞏固你們的知識體系。

1、cookie

一、cookie是什麼？

        HTTP協議自己是無狀態的。什麼是無狀態呢，即服務器沒法判斷用戶身份。Cookie其實是一小段的文本信息（key-value格式）。客戶端向服務器發起請求，若是服務器須要記錄該用戶狀態，就在請求的響應中向客戶端瀏覽器頒發一個Cookie。客戶端瀏覽器會把Cookie保存起來。當瀏覽器再請求該網站時，瀏覽器把請求的網址連同該Cookie一同提交給服務器。服務器檢查該Cookie，以此來辨認用戶狀態。
        固然，對於cookie來講，其實就是存儲在客戶端（如：瀏覽器）中的一段特殊的鍵值對形式的字符串，能夠直接使用document.cookie來進行獲取和設置相關的cookie信息。

二、cookie的運行機制是什麼？

        當用戶第一次訪問並登錄一個網站的時候，cookie的設置以及發送會經歷如下4個步驟：客戶端發送一個請求到服務器->服務器發送一個HttpResponse響應到客戶端，其中包含Set-Cookie的頭部 -> 客戶端保存cookie，以後向服務器發送請求時，HttpRequest請求中會包含一個Cookie的頭部 ->服務器返回響應數據.
        document.cookie屬性看起來像一個普通的文本字符串，其實它不是。即便您在 document.cookie 中寫入一個完整的 cookie 字符串, 當您從新讀取該 cookie 信息時，cookie 信息是以名/值對的形式展現的。若是您設置了新的 cookie，舊的 cookie 不會被覆蓋。若是key的名稱一致，則會進行覆蓋以前的value。

三、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

四、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();
}

2、本地存儲

        本地存儲是html5引入的一項新技術，主要包括localStorage和SessionStorage兩類。具體詳見以下：

一、內置方法

        localStorage和sessionStorage二者都是掛載在window對象下的兩個屬性，其擁有同樣的內置方法，分別爲：

getItem():獲取存儲的信息,

setItem():建立或者修改存儲的信息,

removeItem()：刪除某一個存儲的信息,

clear()：清空全部的存儲信息

二、使用場景：

        Web應用容許使用瀏覽器提供的API實現將數據存儲到用戶電腦上。這樣客戶端存儲遵循「同源策略」，所以不一樣站點的頁面是沒法相互讀取對方存儲的數據，而同一站點的不一樣頁面之間是能夠相互共享存儲數據的，它爲咱們提供了一種通訊機制，例如，一個頁面填寫的表單數據能夠顯示在另外一個頁面中。Web應用能夠選擇存儲數據的有效期：臨時存儲可讓數據保存至當前窗口關閉或者瀏覽器退出；永久存儲能夠將數據永久存儲在硬盤上。客戶端存儲的方式之一就是Web存儲

3、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

4、cookie，sessionStroage，localstorage區別

面試中，常常會將三者放在一塊兒進行對比，具體來闡述他們的相同點和不一樣點：

        cookie的大小限制爲4KB左右。它的主要用途有保存登陸信息，好比你登陸某個網站市場能夠看到「記住密碼」，這一般就是經過在 Cookie 中存入一段辨別用戶身份的數據來實現的。

        sessionStorage（臨時存儲） ：爲每個數據源維持一個存儲區域，在瀏覽器打開期間存在，包括頁面從新加載

        localStorage（長期存儲） ：與 sessionStorage 同樣，可是瀏覽器關閉後，數據依然會一直存在

三者的具體對好比下：

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

下面將對前端中的js方面的知識作一個具體的講解，具體請看下一篇文章：前端常見面試-js基礎篇