摘要：使用方法與相同存儲讀取刪除刪除所有刪除某個兼容性與都支持，大部分瀏覽器都支持六是在瀏覽器保存結構化數(shù)據(jù)中的一種數(shù)據(jù)庫。所以是為了可以在客戶端存儲大量的結構化數(shù)據(jù)而存在的，并且使用索引高效檢索的。

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

瀏覽器緩存一般包含有

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

優(yōu)點：

1.加快頁面打開速度
2.降低服務器壓力（減少對服務器的請求）
3.減少網(wǎng)絡寬帶的消耗，省寬帶費

缺點：

緩存存于內(nèi)存中，沒有清理機制，所以在開發(fā)過程中，要在適當?shù)奈恢们謇砭彺鎸ο?，否則久而久之，文件多了之后會爆滿整個硬盤。

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

規(guī)則：（關鍵字段：http報文，header中）

1.強制緩存

expires： 服務端返回的到期時間(屬于http 1.0版，但現(xiàn)在的瀏覽器默認使用http 1.1版，會被Cache-Control代替)

Cache-Control：用于定義所有的緩存機制都必須遵循的緩存指示

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

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

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

瀏覽器第一次請求數(shù)據(jù)時，服務器會將緩存標識與數(shù)據(jù)一起返回給瀏覽器，瀏覽器將2者備份到緩存數(shù)據(jù)庫中。當?shù)诙伟l(fā)起請求時，將備份的緩存標識發(fā)送給服務器，服務器判斷次緩存標識。判斷成功后會返回403狀態(tài)碼，表示對比成功，可以使用緩存的數(shù)據(jù)展示。

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

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

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

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

Date：服務器的時間

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

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

path: 可以訪問此cookie的頁面路徑。

domain: 可以訪問該cookie的域名
        如果設置為”.google.com”,則所有以”google.com”結尾的域名都可以訪問該Cookie。注意第一個字符必須為“.”

expires: 失效時間。
         為正數(shù)，則Cookie在maxAge秒之后失效。
         為負數(shù)，該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(";");

在web開發(fā)中，需要保存用戶數(shù)據(jù)時，服務器可以為每個用戶瀏覽器創(chuàng)建一個session對象（默認情況下一個瀏覽器獨占一個session對象），并把數(shù)據(jù)寫入session對象。當用戶使用瀏覽器訪問其他程序時，其他程序可以從用戶的session中取出該用戶的數(shù)據(jù)。

1.session與cookie的區(qū)別：

cookie是把用戶的數(shù)據(jù)寫給用戶的瀏覽器

session是把用戶的數(shù)據(jù)寫到用戶獨占的session中

session對象是由服務器創(chuàng)建。

2.session與cookie 的關系：

服務端執(zhí)行session機制

生成唯一的session_id

服務端將session_id發(fā)送給客戶端

客戶端接收到session_id，以cookie作為保存容器存儲起來

客戶端每次請求的時候?qū)蟬ession_id

服務端解析session

sessionStorage是html5新增的會話存儲對象。用于臨時保存同一窗口下的數(shù)據(jù)，窗口關閉后會刪除這些數(shù)據(jù)。

1.特點

只在本地存儲，不會跟隨http請求一起發(fā)送到服務器

存儲方式：采用key、value的方式，value的值必須為字符串

存儲限制為5MB

單標簽頁限制。sessionStorage操作限制在單個標簽頁中，在此標簽頁進行同源頁面訪問都可以共享sessionStorage數(shù)據(jù)。

同源策略：想在不同頁面之間對同一個sessionStorage進行操作，這些頁面就必須在同一協(xié)議、同一主機、同一端口下。(IE 8和9存儲數(shù)據(jù)僅基于同一主機名，忽略協(xié)議（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");

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

使用方法與sessionStorage相同

1.存儲:
localStorage.setItem("testKey","value");
2.讀?。?localStorage.getItem("testKey");
or
localStorage.["testKey"];
3.刪除：
刪除所有：localStorage.clear();
刪除某個： localStorage.removeItem("testKey");

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

indexedDB是在瀏覽器保存結構化數(shù)據(jù)中的一種數(shù)據(jù)庫。

sessionStorage與localStorage 是簡單的存儲字符串健值對，但是對于大量的結構化數(shù)據(jù)的存儲就比較不合適了。所以indexedDB是為了可以在客戶端存儲大量的結構化數(shù)據(jù)而存在的，并且使用索引高效檢索的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...