整理- 緩存

前言

瀏覽器緩存就是把一個請求過的web資源，存儲在瀏覽器中。等下次在訪問相同的請求時，緩存會根據緩存機制去決定要不要向服務器發送請求，或者直接用緩存的資源響應訪問。

瀏覽器緩存通常包含有

1.http協議緩存
2.cookie
3.session
4.sessionStorage
5.localStorage
6.indexDB

優勢：

1.加快頁面打開速度
2.下降服務器壓力（減小對服務器的請求）
3.減小網絡寬帶的消耗，省寬帶費

缺點：

緩存存於內存中，沒有清理機制，因此在開發過程當中，要在適當的位置清理緩存對象，不然長此以往，文件多了以後會爆滿整個硬盤。

1、http協議緩存

用戶發起請求，判斷是否有緩存，在判斷緩存是否過時，若無過時則直接響應緩存的資源，若已過時則從新請求服務器資源。

規則：（關鍵字段：http報文，header中）

1.強制緩存

expires： 服務端返回的到期時間(屬於http 1.0版，但如今的瀏覽器默認使用http 1.1版，會被Cache-Control代替)

Cache-Control：用於定義全部的緩存機制都必須遵循的緩存指示

值： public ， private ， no-cache(表示不緩存) ， no-store max-age（值爲0表示不用緩存），s-maxage，must-revalidate

Cache-Control中設定的時間會覆蓋Expires中指定的時間

2.對比緩存（須要先進行比較判斷是否可使用緩存）

瀏覽器第一次請求數據時，服務器會將緩存標識與數據一塊兒返回給瀏覽器，瀏覽器將2者備份到緩存數據庫中。當第二次發起請求時，將備份的緩存標識發送給服務器，服務器判斷次緩存標識。判斷成功後會返回403狀態碼，表示對比成功，可使用緩存的數據展現。

Last-Modified：服務器在響應請求時，告訴瀏覽器資源的最後修改時間。

If-Modified-Since：客戶端存取的該資源最後一次修改的時間，同Last-Modified。

ETag：響應中資源的校驗值，在服務器上某個時段是惟一標識的。

If-None-Match：客戶端存取的該資源的檢驗值，同ETag。

Date：服務器的時間

2、cookie

cookie是由服務端發給客戶端的特殊信息，而這些信息以文本文件的方式存放在客戶端，而後客戶端每次請求服務端時都會自動帶上這些特殊信息（放置於http響應頭部）。

以 名/值 類型存儲:  username = jane

path: 能夠訪問此cookie的頁面路徑。

domain: 能夠訪問該cookie的域名
        若是設置爲」.google.com」,則全部以」google.com」結尾的域名均可以訪問該Cookie。注意第一個字符必須爲「.」

expires: 失效時間。
         爲正數，則Cookie在maxAge秒以後失效。
         爲負數，該Cookie爲臨時Cookie，關閉瀏覽器即失效，瀏覽器也不會以任何形式保存Cookie。
         爲0，表示刪除Cookie。默認是-1

size: cookie的大小

http: cookie的httponly屬性。
      爲true，則只有在http請求頭中會帶有此cookie的信息，而不能經過document.cookie來訪問此cookie。

secure: 是否只能經過https來傳遞此條cookie

使用：

1.設置：
document.cookie = "name=Jonh; ";
多個：
document.cookie = "name=Jonh; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

2.修改：
document.cookie = "name=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

要想修改一個cookie，只須要從新賦值就行，舊的值會被新的值覆蓋。但要注意一點，在設置新cookie時，path/domain這幾個選項必定要與舊cookie保持同樣。不然不會修改舊值，而是添加了一個新的 cookie。

3.刪除：
document.cookie = "name=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

要想修改一個cookie，只須要從新賦值就行，舊的值會被新的值覆蓋。但要注意一點，在設置新cookie時，path/domain這幾個選項必定要與舊cookie保持同樣。不然不會修改舊值，而是添加了一個新的 cookie。

4.獲取：
const cookieArr = document.cookie.split(';');

3、session

在web開發中，須要保存用戶數據時，服務器能夠爲每一個用戶瀏覽器建立一個session對象（默認狀況下一個瀏覽器獨佔一個session對象），並把數據寫入session對象。當用戶使用瀏覽器訪問其餘程序時，其餘程序能夠從用戶的session中取出該用戶的數據。

1.session與cookie的區別：

• cookie是把用戶的數據寫給用戶的瀏覽器
• session是把用戶的數據寫到用戶獨佔的session中
• session對象是由服務器建立。

2.session與cookie 的關係：

• 服務端執行session機制
• 生成惟一的session_id
• 服務端將session_id發送給客戶端
• 客戶端接收到session_id，以cookie做爲保存容器存儲起來
• 客戶端每次請求的時候將會帶上session_id
• 服務端解析session

4、sessionStorage-臨時存儲

sessionStorage是html5新增的會話存儲對象。用於臨時保存同一窗口下的數據，窗口關閉後會刪除這些數據。

1.特色

• 只在本地存儲，不會跟隨http請求一塊兒發送到服務器
• 存儲方式：採用key、value的方式，value的值必須爲字符串
• 存儲限制爲5MB
• 單標籤頁限制。sessionStorage操做限制在單個標籤頁中，在此標籤頁進行同源頁面訪問均可以共享sessionStorage數據。
• 同源策略：想在不一樣頁面之間對同一個sessionStorage進行操做，這些頁面就必須在同一協議、同一主機、同一端口下。(IE 8和9存儲數據僅基於同一主機名，忽略協議（HTTP和HTTPS）和端口號的要求)

2.使用

1.存儲:
sessionStorage.setItem('testKey','value');
or
sessionStorage['testKey'] = 'value'; 
2.讀取：
sessionStorage.getItem('testKey');
or
sessionStorage['testKey']; 
3.刪除：
刪除全部：sessionStorage.clear();
刪除某個： sessionStorage.removeItem('testKey');

5、localStorage-長期存儲

同sessionStorage同樣，localStorage也是html5新加的一個特性。與sessionStorage所不一樣的是，localStorage是長期存儲，瀏覽器關閉後，數據依然會存在。

使用方法與sessionStorage相同

1.存儲:
localStorage.setItem('testKey','value');
2.讀取：
localStorage.getItem('testKey');
or
localStorage.['testKey'];
3.刪除：
刪除全部：localStorage.clear();
刪除某個： localStorage.removeItem('testKey');

兼容性：localStorage與localStorage都支持ie8+，大部分瀏覽器都支持

6、indexedDB

indexedDB是在瀏覽器保存結構化數據中的一種數據庫。

sessionStorage與localStorage 是簡單的存儲字符串健值對，可是對於大量的結構化數據的存儲就比較不合適了。因此indexedDB是爲了能夠在客戶端存儲大量的結構化數據而存在的，而且使用索引高效檢索的api。

大小限制：

每一個瀏覽器都不同，firefox 無限制，Google Chrome每條記錄大小不超過130MB

教程：https://www.cnblogs.com/steph...

參考：

https://segmentfault.com/a/11...

https://www.cnblogs.com/xdp-g...

https://www.cnblogs.com/polk6...

https://www.cnblogs.com/steph...