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

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

瀏覽器緩存一般包含有

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

優(yōu)點(diǎn)：

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

缺點(diǎn)：

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

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

規(guī)則：（關(guān)鍵字段：http報(bào)文，header中）

1.強(qiáng)制緩存

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

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

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

Cache-Control中設(shè)定的時(shí)間會(huì)覆蓋Expires中指定的時(shí)間

2.對(duì)比緩存（需要先進(jìn)行比較判斷是否可以使用緩存）

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

Last-Modified：服務(wù)器在響應(yīng)請(qǐng)求時(shí)，告訴瀏覽器資源的最后修改時(shí)間。

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

ETag：響應(yīng)中資源的校驗(yàn)值，在服務(wù)器上某個(gè)時(shí)段是唯一標(biāo)識(shí)的。

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

Date：服務(wù)器的時(shí)間

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

以 名/值 類型存儲(chǔ):  username = jane

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

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

expires: 失效時(shí)間。
         為正數(shù)，則Cookie在maxAge秒之后失效。
         為負(fù)數(shù)，該Cookie為臨時(shí)Cookie，關(guān)閉瀏覽器即失效，瀏覽器也不會(huì)以任何形式保存Cookie。
         為0，表示刪除Cookie。默認(rèn)是-1

size: cookie的大小

http: cookie的httponly屬性。
      為true，則只有在http請(qǐng)求頭中會(huì)帶有此cookie的信息，而不能通過document.cookie來訪問此cookie。

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

使用：

1.設(shè)置：
document.cookie = "name=Jonh; ";
多個(gè)：
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=/";

要想修改一個(gè)cookie，只需要重新賦值就行，舊的值會(huì)被新的值覆蓋。但要注意一點(diǎn)，在設(shè)置新cookie時(shí)，path/domain這幾個(gè)選項(xiàng)一定要與舊cookie保持一樣。否則不會(huì)修改舊值，而是添加了一個(gè)新的 cookie。

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

要想修改一個(gè)cookie，只需要重新賦值就行，舊的值會(huì)被新的值覆蓋。但要注意一點(diǎn)，在設(shè)置新cookie時(shí)，path/domain這幾個(gè)選項(xiàng)一定要與舊cookie保持一樣。否則不會(huì)修改舊值，而是添加了一個(gè)新的 cookie。

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

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

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

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

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

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

2.session與cookie 的關(guān)系：

服務(wù)端執(zhí)行session機(jī)制

生成唯一的session_id

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

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

客戶端每次請(qǐng)求的時(shí)候?qū)?huì)帶上session_id

服務(wù)端解析session

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

1.特點(diǎn)

只在本地存儲(chǔ)，不會(huì)跟隨http請(qǐng)求一起發(fā)送到服務(wù)器

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

存儲(chǔ)限制為5MB

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

同源策略：想在不同頁面之間對(duì)同一個(gè)sessionStorage進(jìn)行操作，這些頁面就必須在同一協(xié)議、同一主機(jī)、同一端口下。(IE 8和9存儲(chǔ)數(shù)據(jù)僅基于同一主機(jī)名，忽略協(xié)議（HTTP和HTTPS）和端口號(hào)的要求)

2.使用

1.存儲(chǔ):
sessionStorage.setItem("testKey","value");
or
sessionStorage["testKey"] = "value"; 
2.讀取：
sessionStorage.getItem("testKey");
or
sessionStorage["testKey"]; 
3.刪除：
刪除所有：sessionStorage.clear();
刪除某個(gè)： sessionStorage.removeItem("testKey");

同sessionStorage一樣，localStorage也是html5新加的一個(gè)特性。與sessionStorage所不同的是，localStorage是長(zhǎng)期存儲(chǔ)，瀏覽器關(guān)閉后，數(shù)據(jù)依然會(huì)存在。

使用方法與sessionStorage相同

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

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

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

sessionStorage與localStorage 是簡(jiǎn)單的存儲(chǔ)字符串健值對(duì)，但是對(duì)于大量的結(jié)構(gòu)化數(shù)據(jù)的存儲(chǔ)就比較不合適了。所以indexedDB是為了可以在客戶端存儲(chǔ)大量的結(jié)構(gòu)化數(shù)據(jù)而存在的，并且使用索引高效檢索的api。

大小限制：

每個(gè)瀏覽器都不一樣，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...