瀏覽器的儲存與快取機制

localstorage

sessionstorage

sessionstorage 、localstorage 之間的區別

indexeddb

cache

總結區分

瀏覽器快取機制

協商快取

根據快取機制詳解返回304的全過程

快取的資料型別都為字串，通常需將物件序列化成字串。

原理及生成方式

cookie的缺陷

cookie與session的區別與聯絡

session和cookie的區別：

session和cookie的聯絡:

手寫cookie

let cookie =
,// 獲取cookie
get:
function
(key)
}return res;
}}

通過localstorage可以將資料儲存在客戶端,並且可以通過localstorage.setitem / localstorage.getitem呼叫。

localstoreage用於將大量資料（最大5m）儲存在瀏覽器中

儲存後永久儲存，除非用js手動清除。

不參與網路傳輸一般用於優化效能，主要用於保持大量資料。

通過sessionstorage.setitem / sessionstorage.getitem呼叫。

web storage只能用來儲存字串，只能儲存較少量的資料，遇到大規模且結構複雜的資料時，需要使用indexeddb。

indexeddb用於客戶端儲存大量結構化資料。是乙個執行在瀏覽器上的非關係型資料庫。是沒有儲存上限，不僅可以儲存字串，還可以儲存二進位制資料。

在進行第一次連線時，所有資源都需要客戶端向服務端獲取。並且瀏覽器會快取一部分資源到本地cache，當再次連線時，直接從瀏覽器獲取即可。如果伺服器更新了資源，再重新獲取。怎樣判斷是否需要重新獲取？就是下文的瀏覽器快取機制的作用了。

瀏覽器每次發起請求，都會先在瀏覽器快取中查詢該請求的結果以及快取標識拿到返回的請求結果後，都會將該結果和快取標識存入瀏覽器快取中瀏覽器對於快取的處理是根據第一次請求資源時返回的響應頭來確定的。

根據快取機制的不同，分為強快取與協商快取。

不會向伺服器傳送請求，直接從快取中讀取資源

通過設定兩種 http header 實現：expires和cache-control。

快取過期時間，用來指定資源到期的時間，是伺服器端的具體的時間點。

cache-control 可以在請求頭或者響應頭中設定，並且可以組合使用多種指令：

區別因為強快取根據過期時間來判斷是否需要重新請求，所以會出現在有效期內，伺服器資源已經更新，但獲取到的仍是舊資源。

協商快取就是強制快取失效(可能是cache-control設定了no-cache或no-store)後，瀏覽器攜帶快取標識向伺服器發起請求，由伺服器根據快取標識決定是否使用快取的過程，主要有以下兩種情況：

協商快取生效，返回304和not modified

協商快取失效，返回200和請求結果

協商快取可以通過設定兩種服務端的響應頭來實現：last-modified和etag。

last-modified和if-modified-since(http/1.0)

瀏覽器在第一次訪問時，伺服器在響應頭中新增last-modified的header，值是這個資源的最後修改時間

瀏覽器下一次請求，檢測到有last-modified，新增if-modified-since，值就是last-modified中的值；伺服器會根據請求中if-modified-since 中的值與伺服器中這個資源的最後修改時間對比，看是否有變化。

缺陷：

etag和if-none-match(http/1.1)

etag是伺服器響應請求時，返回資源的乙個唯一標識，只要資源有變化，etag就會重新生成。

具體過程：

瀏覽器在向伺服器傳送請求時，會將上一次返回的etag值放到請求頭的if-none-match裡

伺服器比較if-none-match跟伺服器上該資源的etag是否一致，匹配不上，返回200。區別

效能：etag < last-modified

優先順序：etag > last-modified

瀏覽器的儲存與快取機制

瀏覽器快取機制

瀏覽器快取機制

瀏覽器快取機制

相關推薦