大家好，我是林一一，這是一篇關於瀏覽器 緩存原理 和 本地存儲 的文章，後續回持續推出關於，瀏覽器原理的文章。
一、瀏覽器的緩存篇
思維導圖
所謂瀏覽器的緩存，就是瀏覽器通過HTTP請求網絡資源後將資源留在本地的一種行為。在頁面上點擊返回和前進的按鈕就是利用瀏覽器的緩存。
- 瀏覽器的緩存分為兩種
強緩存和協商緩存。 - 瀏覽器緩存資源的位置放置四個地方
Service Worker, Memory Cache, Disk Cache, Push Cache。Service Worker優先級最高到Push Cache。
瀏覽器請求資源過程
先本地再服務器(先強緩存再協商緩存)
- 瀏覽器請求資源時會先去判斷本地緩存資源的
header是否有命中強緩存，如果命中強緩存則直接請求本地的資源，不向服務器發送請求。 -
如果沒有命中強緩存或強緩存失效以後就會發送
HTTP請求服務器，這個過程採用的就是協商緩存簡單的説瀏覽器的緩存請求分為有無
HTTP請求兩種。
強緩存
所謂的強緩存是我們沒有發送 HTTP 請求，而是直接從本地緩存中獲取資源的一種行為。成功後返回狀態碼 200。
- 瀏覽器是根據響應頭的
headers字段判斷Expires/http1.0，Cache-Control/http1.1，來執行強緩存的過程。 -
沒有或失效的強緩存，瀏覽器會向服務器發送請求資源。
Expires
http1.0 中一個頁面的緩存字段，是一個格林時間。這個時間是瀏覽器強緩存資源失效的時間
Expires: Wed, 22 Nov 2021 08:41:00 GMT上面的表示緩存的資源會在
2021年11月22號8點41分過期。 - 缺點：瀏覽器是根據本地的時間判斷資源是否過期的，但是本地的時間可以被修改，所以在
HTTP1.1時Expires被放棄了。
Cache-Control
HTTP1.1 中頁面的緩存字段。 如果Expires和Cache-Control都存在，那麼Cache-Control的優先級更高。
-
Cache-Control的屬性值有很多，其中屬性max-age表示，一個相對的緩存時間Cache-Control: max-age = 3600表示距離上次請求的一小時內可以直接使用本地的緩存。不需要再次請求。
- 屬性
public表示可以被瀏覽器或代理服務器緩存。 - 屬性
private表示只能被瀏覽器緩存。 - 屬性
no-cache需要發送請求到服務器確認是否被緩存，這需要使用到協商緩存。 - 屬性
no-store表示禁止使用緩存，每一次都需要請求服務器。
協商緩存
所謂協商緩存是指：瀏覽器攜帶緩存的標識 tag向服務器發送請求，服務器更具攜帶過來的標識判斷是否使用緩存的這個過程就是協商緩存。
- 瀏覽器請求服務器返回的結果有兩種，一種
304表示服務器的資源還沒有更新直接使用瀏覽器本地的緩存即可。另一種返回200，表示服務器資源更新且攜帶新的資源返回給瀏覽器。 - 緩存標識
tag分成兩種Last-Modified/If-Modified-Since和ETag/If-None-Match，Etag / If-None-Match的優先級高於Last-Modified。
Etag / If-None-Match
-
Etag 時服務器響應請求時 返回的一個唯一標識。這個標識只能由服務器產生。
etag: W/"5357d2b3f63545926812b95658505315" - If-None-Match 時瀏覽器再次請求服務器時，會攜帶
Etag標識值發送給服務器，服務器會將這個值和在服務器中的Etag比較，兩個值相等那麼返回304，如果不相等就返回200將新的資源返回。
Last-Modified/If-Modified-Since
-
Last-Modified，指的是返回請求的資源文件最後在服務器被修改的時間。
Last-Modified: Wed, 23 Nov 2021 08:41:00 GMT - If-Modified-Since，是瀏覽器再次請求資源時，會攜帶上一次返回的
Last-Modified的時間發送給服務器。服務器將上一次最後修改的時間 和現在的最後修改的時間做對比。如果大於If-Modified-Since的值，服務器就會返回新的資源 200，否則返回304。
緩存位置
上面提到過緩存的位置Service Worker, Memory Cache, Disk Cache, Push Cache。Service Worker優先級最高到Push Cache
- Service Worker 運行在瀏覽器的獨立線程可以實現瀏覽器的緩存功能，傳輸協議需要使用
HTTPS。 - Memory Cache 是將資源緩存在內存中。
- Disk Cache 是將資源緩存在磁盤中
- Push Cache（推送緩存）是 HTTP/2 中，存活在會話
session中，存活的時間很短。
二、瀏覽器的本地緩存篇
瀏覽器的本地緩存主要分為 5 種，localStorage, sessionStorage, cookie, WebSql, indexedDB。
cookie
cookie 是服務器生成的，保存到瀏覽器的一個本地文件中。前端可以通過Set-Cookie設置 cookie，前端可以設置多個Set-Cookie。
-
cookie 可以設置過期的時間也可以不設置時間，瀏覽器關閉後就會失效。
Set-Cookie: BDSVRTM=7; path=/ Set-Cookie: H_PS_PSSID=34130_34099_33969_31253_33848_33607_26350; path=/; domain=.baidu.com - cookie 產生原因：是用來做
狀態存儲的，因為 http 是無狀態的，不能記錄數據狀態，cookie 可以記錄數據的狀態。比如用户的id，密碼，瀏覽過的頁面等。 - cookie 的優點：1. 記住數據的狀態，密碼等。2. 彌補的 HTTP 的無狀態。
- cookie 的缺點：1. 容量缺陷，只能存儲
4kb大小；2.安全問題，cookie是以文本的形式在瀏覽器和服務器之前傳遞信息，很有可能會被修改。3. 請求的Cookie文件容易被刪除。 4. 性能消耗大，cookie 是緊跟域名的，域名下的任意地址被修改都攜帶cookie到服務器。造成性能浪費。
localStorage
localStorage存值的方式和 cookie 類似，都會存放在同一個域名下，localStorage 可以長期存儲，沒有時間的限制。可以通過localStorage.setItem()/getItem()存取值。
- localStorage 優點：1.擴展了 cookie 的存儲大小，可以存放 5M 大小，不同瀏覽器不同；2.只存儲在瀏覽器不會和服務器之間有通信解決了cookie 的安全問題和性能消耗問題。
- localStorage 缺點：1.需要手動刪除保存的數據；2.只支持字符串類型，JSON 類型需要通過
JSON.stringify()轉化。 - localStorage 使用場景：利用 localStorage 可以存放一些穩定的資源和base64的圖片等
sessionStorage
sessionStorage 和 localStorage 一致，唯一大的區別在於 sessionStorage 是會話級別的存儲
- 會話級別的
sessionStorage也就是在瀏覽器頁面關閉後，這個存儲也就消失了。 - sessionStorage 的場景：sessionStorage 可以用於保存一些臨時的數據，防止頁面消失後數據就沒了，比如表單填寫和用户的瀏覽器記錄等。
indexedDB
瀏覽器提供的非關係型數據庫，indexedDB 提供大量的接口提供查詢功能，還能建立查詢。
- 以鍵值對的形式存儲值，包括 js 對象
- indexedDB 是異步的，存入數據不會導致頁面卡頓。
- indexedDB 支持事務，事務是一系列操作過程中發生了錯誤，數據庫會回退到操作事務之前的狀態。
- 同源限制，不同源的數據庫不能訪問。
- 存儲空間沒有限制。
webSQL
已廢棄，旨在通過 js 語句操控 sql 語句完成對數據的讀寫。
參考
《圖解HTTP》
瀏覽器緩存
前端緩存
本地存儲
