I .什么是緩存

web cache是自動存儲常用文檔副本的設(shè)備。

在客戶端發(fā)起請求的時候，如果就近的緩存擁有客戶端想要的副本，那么就會加快網(wǎng)站的響應(yīng)速度。

在出現(xiàn)帶寬不足、瞬間擁塞（很多用戶同時訪問某一站點(diǎn)）、距離時延（由于距離很遠(yuǎn)產(chǎn)生時延）這些情況下，緩存的優(yōu)勢就會體現(xiàn)出來了。

緩存可分為：私有緩存和公有緩存。

私有緩存是個人緩存，包含單個用戶最常用的頁面。（瀏覽器的緩存是私有緩存）

公有緩存包含了某個用戶團(tuán)體的常用的頁面。

二. 瀏覽器存儲

瀏覽器存儲（Browser Caching）是瀏覽器的一種優(yōu)化機(jī)制。瀏覽器的緩存中保存了用戶經(jīng)常訪問的一些文檔的副本，避免了一些重復(fù)的網(wǎng)絡(luò)請求，

瀏覽器能夠快速地讀取本地的數(shù)據(jù)，這樣就會加快網(wǎng)站的訪問速度。

1. 瀏覽器有哪幾種緩存機(jī)制

瀏覽器一共有九種緩存機(jī)制

打開瀏覽器 -> 點(diǎn)擊F12 -> 點(diǎn)Application

可以看到瀏覽器的多種緩存機(jī)制：

瀏覽器的幾種緩存機(jī)制

(1). http緩存

http緩存是基于http協(xié)議的瀏覽器文件緩存機(jī)制，當(dāng)重復(fù)請求某一個文件時，瀏覽器可以根據(jù)協(xié)議的頭文件判斷是從服務(wù)器端請求文件還是從本地讀取文件。

上圖中的Frames展示的就是http緩存

a. 判斷過期的兩種方式：

Expires和Cache-Control:max-age

Expires：存的是絕對的過期的日期（例如：牛奶的保質(zhì)期）

Cache-Control:max-age 存的是還可以保鮮多久，是相對時間，用秒做單位

b. 如果a中判斷緩存已經(jīng)過期，那么就要進(jìn)行緩存再驗(yàn)證

緩存再驗(yàn)證的兩種方式：

請求報文里攜帶

If-Modified-Since:Date和If-None-Match

If-Modified-Since:Date 對修改日期進(jìn)行驗(yàn)證

If-None-Match：<tags> 對實(shí)體標(biāo)簽的版本標(biāo)識符進(jìn)行驗(yàn)證

例如：

響應(yīng)報文：

HTTP 200 OK Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT ETag: "10c24bc-4ab-457e1c1f" Content-Length: 12195

下一次的請求報文 ：

GET /i HTTP Host: us.yimg.com If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT If-None-Match: "10c24bc-4ab-457e1c1f"

再次響應(yīng)的報文：

HTTP 304 Not Modified

c. b中再驗(yàn)證的結(jié)果有兩種：服務(wù)器中的文件未修改 和 服務(wù)器中的文件有修改

服務(wù)器中的文件未修改：緩存中的副本可以使用，那么瀏覽器直接從緩存讀取文檔，返回304

服務(wù)器中的文件有修改：緩存中的副本不能使用，那么直接從服務(wù)器端讀取文檔，返回200

(2). indexDB 客戶端本地數(shù)據(jù)庫（大型數(shù)據(jù)庫）

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

indexDB設(shè)計的操作完全是異步進(jìn)行的。

indexDB最大的特色是使用對象保存數(shù)據(jù)。

indexDB.open(“database”) 打開數(shù)據(jù)庫 或者 創(chuàng)建并打開數(shù)據(jù)庫；

indexDB.setVersion(“1.0”) 為數(shù)據(jù)庫指定一個版本號；

da(); 創(chuàng)建事務(wù)，對數(shù)據(jù)庫進(jìn)行操作；

openCursor() 在對象存儲空間上調(diào)用這個方法，通過游標(biāo)查找數(shù)據(jù)；

createIndex() 創(chuàng)建索引；

indexDB的并發(fā)問題；

(3). Cookies

1.cookies是什么

cookies是服務(wù)器用來標(biāo)識web用戶的一小塊數(shù)據(jù)。

cookies的基本思想就是讓瀏覽器積累一組服務(wù)器特有的信息，并在客戶端和服務(wù)器端來回傳遞。

Cookies是由服務(wù)器端生成，發(fā)送給瀏覽器，瀏覽器會將Cookies的key/value保存到某個目錄下的文本文件內(nèi)，

下次請求同一網(wǎng)站時就發(fā)送該Cookies給服務(wù)器（前提是瀏覽器設(shè)置為啟用cookies）。

Cookies一般存在用戶本地終端上，通常經(jīng)過加密處理。

Cookies一般通過http請求中的頭部一起發(fā)送到服務(wù)器端。在客戶端和服務(wù)器端之間來回傳遞。

一條cookie記錄主要由鍵、值、域、過期時間、大小組成。

2. cookies的分類：持久cookies 和 會話cookies

一般而言，我們所說的cookie是指的持久cookie（設(shè)置了過期時間的cookie）

持久cookie：存儲在硬盤上；

持久cookie：是在過期時間之后消失。

持久cookie：是存在電腦硬盤里，是可以被同一個瀏覽器的所有頁面共享的（無論是多進(jìn)程還是多線程瀏覽器）；

補(bǔ)充一點(diǎn)點(diǎn)：

不同瀏覽器之間不能共享cookie，因?yàn)槊總€瀏覽器存cookie路徑不是一樣的。

3. cookies的安全性問題：

第三方web站點(diǎn)使用持久cookie來跟蹤用戶，當(dāng)用戶訪問同一個廣告公司提供的站點(diǎn)，瀏覽器就會回送之前設(shè)置的持久cookie，

廣告公司便可構(gòu)建成一個用戶檔案和瀏覽習(xí)慣的詳盡數(shù)據(jù)集。

(4). storage類型

有如下方法：

clear()；

getItem(name)；

key(index)；

removeItem(name)；

setItem(name,value)；

localStorage對象：要訪問同一個localStorage對象，頁面必須同源;

sessionstorage對象：只能被最初給對象存儲的頁面所訪問;

修改localStorage對象、sessionstorage對象都會觸發(fā) document 的 storage事件;

localstorage 和 sessionstorage 都是HTML5提供的在客戶端存儲數(shù)據(jù)的新方法。

這兩個都是windows對象的屬性。

其主要區(qū)別是：

localStorage - 沒有時間限制的數(shù)據(jù)存儲，主要用來存儲ajax返回的數(shù)據(jù)，加快下次訪問的渲染速度。

sessionStorage - 針對一個 session 的數(shù)據(jù)存儲。瀏覽器關(guān)閉后就刪除。

不同的瀏覽器無法共享localStorage或sessionStorage中的信息。

注意：cookies、localStorage、sessionStorage的區(qū)別

1. 存儲時間不同

持久cookies在過期日期之前都會存在;

localStorage會一直存在，除非主動刪除;

sessionStorage在標(biāo)簽頁關(guān)閉之后就會刪除;

2. 存儲的位置不同

持久cookies是存在用戶終端，也就是電腦硬盤上，cookies始終在同源的http請求中攜帶，會在瀏覽器和服務(wù)器間來回傳遞。

localStorage和sessionStorage是存在瀏覽器端;

3. 存儲大小不同

cookies數(shù)據(jù)大小不能超過4k;

sessionStorage和localStorage存儲大小比cookies大得多，可以達(dá)到5M;

4. cookie還需要指定作用域，不允許跨域調(diào)用

localStorage、sessionStorage的使用場景：

localStorage實(shí)現(xiàn)離線操作，新聞編輯上傳功能，離線時保存在本地，有線時上傳；保存用戶配置項(xiàng)。

希望用戶關(guān)閉頁面之后就銷毀的數(shù)據(jù)可以保存在sessionStorage中;

(6). application cache 離線存儲

1.什么是application cache

application cache是HTML5的新特性，允許瀏覽器在本地存儲頁面所需要的資源，使得頁面離線也可以訪問。

在用戶沒有與因特網(wǎng)進(jìn)行連接時，可以正常訪問站點(diǎn)或應(yīng)用，在用戶與因特網(wǎng)連接時，更新用戶機(jī)器上的緩存文件。

application cache是從瀏覽器的緩存中分出來的一塊緩存區(qū)。

如何判斷設(shè)備是否離線？

i) { //設(shè)備在線時的操作 } else { //設(shè)備離線時的操作 }

window對象上定義了2個事件：

online: 設(shè)備從離線變成在線;

offline: 設(shè)備從在線變成離線.