一文读懂浏览器存储与缓存机制
瀏覽器存儲
Cookie
Cookie 是 HTTP 協議的一種無狀態協議。當請求服務器時，HTTP 請求都需要攜帶 Cookie，用來驗證用戶身份。Cookie 由服務端生成，存儲在客戶端，用來維持狀態。
通常 Cookie 由以下值構成：
名稱（name）值（value）域（Domain）值（value）路徑（Path）失效時間（Expiers/Max-Age）大小（Size）是否為 HTTP 請求（HttpOnly）安全性（Secure）提示：域、路徑、失效時間和安全性都是服務器給瀏覽器的指示，它們不會隨著請求發送給服務器，發送給服務器的只有名稱與值對。Cookie 有一些限制，它可以設置有過期時間，但是如果沒有設置，則會和 session 一個級別，一旦關閉瀏覽器就會消失。
Cookie 擁有以下優點：
-
可以控制過期時間，不會永久有效，有一定的安全保障。
-
可進行擴展，可跨域共享。
-
通過加密與安全傳輸技術 （SSL），可以減少 Cookie 被破解的可能性。
-
有較高的兼容性。
缺點則如下：
-
有一定的數量與長度限制，每個 Cookie 長度不能超過 4KB ，否則超出部分會被截掉。
-
請求頭上的數據容易被攔截攻擊。
-
單個 Cookie 大小不超過 4KB，很多瀏覽器都限制一個站點最多保存 20 個 Cookie。
web Storage
H5 可以在本地存儲用戶的瀏覽數據，以前用 Cookie，但是 web Storage 更快速、安全。可以存儲大量的數據，而不影響網站性能，以鍵/值對存在。
web Storage 分為兩種：sessionStorage 和 localStorage。
sessionStorage
sessionStorage 將數據存儲在 session 中，當瀏覽器關閉就會消失。它具有以下特色：
- 大小 5Mb - 頁面刷新數據不會消失，頁面關閉就消失。 - 不可以跨頁面（僅在當前頁面使用）。 - 使用 window.open 打開頁面和改變 location.href 方式可以獲取到 sessionStorage 內部的數據。主要被應用在下面這些場景中：
-
主要針對會話級的小數據的存儲。
-
存儲一些在當前頁面刷新仍然需要存儲，但是關閉后不需要留下的信息。
-
很適合單頁應用的使用，可以用來存儲登錄態信息等。
localStorage
localStorage 會把數據一直存在客戶端本地。其 API 提供了如下的方法進行操作：
-
setItem (key，value) —— 保存數據，以鍵值對的方式存儲。
-
getItem (key) —— 讀取數據，傳入鍵值（key），獲得對應的值（value）。
-
removeItem (key) —— 刪除某個數據，刪除鍵值對。
-
clear () —— 刪除所有數據。
-
key (index) —— 獲取某個索引的key。
下面是 localStora 的特性：
- 大小 5Mb。 - 可以跨頁面。 - 永久存儲，需要手動刪除。 - 使用 window.open 打開頁面和改變 location.href 方式可以獲取到 sessionStorage 內部的數據。它通常都被運用在下列場景中：
-
持久性的保存客戶端數據，只能通過 JavaScript 刪除或者用戶清除瀏覽器緩存。
-
如果有一些稍大量的數據，例如編輯器的自動保存等。
-
多頁面間訪問共同數據。sessionStorage 只能用于一個標簽頁，而localStorage可以在多個標簽頁之間共享。
瀏覽器緩存機制
瀏覽器的緩存機制是將已訪問過的資源進行緩存，這樣當客戶端下次訪問時，就能直接訪問已經緩存的資源，從而減少服務器請求次數，讓頁面能夠更快地加載。
而判斷是否訪問緩存則是依靠 HTTP 的各種 Header，比如下面的這幾種：
-
Expires：響應頭，表示該資源的過期時間。
-
Cache-Control：請求頭/響應頭，是緩存控制字段。
-
Etag (HTTP1.1)：響應頭，是資源標識，服務器存儲。一旦資源被修改，Etag 就會隨之發生變化。
-
lf-None-Match (HTTP1.1)：請求頭，一般服務器會將 If-None-Match 與被請求資源的最新 ETag 進行比對。
-
Last-Modified (HTTP1.0)：響應頭，表示資源最后一次修改的時間。
-
If-Modified-Since (HTTP1.0)：請求頭，資源最后一次修改時間(后面詳情）。
這些 Header 共同組成了 HTTP 的請求和響應，也支撐著瀏覽器緩存，但是這種緩存方式是有缺陷的。
首先，如果資源更新的速度是秒以下單位，那么這個緩存是不能被使用的。因為它的時間單位最低是秒。
其次，如果文件是通過服務器動態生成的，那么該方法的更新時間永遠是生成的時間。哪怕文件可能沒有變化，它也會自動更新，所以起不到緩存的作用。
強緩存
通常服務器會通知瀏覽器一個緩存時間，這個信息在 Cache-Control 和 Expires 中，瀏覽器通過這個判斷是緩存否過期。如果時間未過期。則直接從緩存中取。這就是所謂的“強緩存”。
Expires
在 HTTP1.0 中。使用 Expires 字段來表示緩存的到期時間，即有效時間+當時服務器的時間。但是這種方式的缺陷是，用戶只需要修改客戶端本地時間，讓客戶端和服務器時間不一致時，瀏覽器就會判斷緩存失效，然后重新請求資源。
Cache-control
Cache-Control 是一個 HTTP 協議中關于緩存的響應頭，它可以由以下值組成：
-
max-age：用于設置緩存的最大周期。與 Expires 相反，它的時間是相對于請求的時間。
-
s-maxage：和 max-age 相同，僅用于共享緩存，如 CDN 緩存。
-
public：相應可以被任何對象緩存，即使是通常不可緩存的內容。
-
private：緩存只能被單個用戶緩存，不能作為共享緩存（即代理服務器不可緩存）。
-
no-cache：可以緩存在客戶端，但每次都必須去服務器檢查新鮮度，來決定從服務器獲取最新資源（200）還是讀取緩存（304），即協商緩存。
-
no-store：不允許在客戶端存儲，每次都要從服務器請求新的資源。
協商緩存
如果未命中強緩存，即強緩存失效（可能是 Cache-Control 設置了 no-store 或 no-cache），則判斷協商緩存。
Last-Modified & If-Modified-Since(HTTP1.0)
當第一次請求資源后，服務器會返回改資源最后一次修改的時間。之后再次請求時，服務器會對比 If-Modified-Since 和 Last-Modified 字段。如果兩者相同，則表示資源未修改，返回 304 狀態碼。如果兩者不同，則表示資源已經修改了，所以返回數據和 200 狀態碼（沒有發送請求）。
但是如果服務器更新資源的時間單位為秒，而上面提到的方法是無法識別一秒內進行多次修改的情況的。同時如果資源更新的速度不到 1ms，也是無法生成新的最后修改時間的。為了避免這種情況，在 HTTP1.1 中出現了一組新的字段：Etag 和 If-None-Match。
Etag & If-None-Match (HTTP1.1)
Etag 是 HTTP1.1 的屬性。它由服務器生成并返回給客戶端，優先級高于 Last-Modified。
在 HTTP1.1 中，當瀏覽器第一次發起 HTTP 請求時，服務器回返回一個 Etag。瀏覽器第二次發起同一個請求時，客戶端會發送一個 If-None-Match，它的值就是 Etag。服務器會比較瀏覽器發送過來的 Etag 和服務器的 Etag，如果相同就將 If-None-Match 的值設置為 false，并返回304，表示使用瀏覽器緩存。如果不同，服務器就將 If-None-Match 的值設置為 true，返回 200 和新的數據。
網頁加載速度的加快絕不僅僅是網速加快就能完成的，在我們流暢訪問的背后，瀏覽器存儲和緩存機制也功不可沒，希望本文能夠幫助大家增加對這個機制的了解。
參考資料：
深入理解瀏覽器的緩存機制 https://www.jianshu.com/p/54cc04190252
一文讀懂前端緩存 https://juejin.cn/post/6844903747357769742?utm_source=gold_browser_extension
瀏覽器的存儲與緩存機制 https://blog.csdn.net/wantingtr/article/details/100559520
總結
以上是生活随笔為你收集整理的一文读懂浏览器存储与缓存机制的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： TypeScript 枚举指南
- 下一篇： 在HTML中,如何设置新窗口打开和在原窗