一. 什么是緩存
web緩存是一個設備，這個設備可以自動保存常用的文檔的副本。在客戶端發起請求的時候，如果就近的緩存擁有客戶端想要的副本，那么就會加快網站的響應速度。
在出現帶寬不足、瞬間擁塞（很多用戶同時訪問某一站點）、距離時延（由于距離很遠產生時延）這些情況下，緩存的優勢就會體現出來了。
緩存可分為：私有緩存和公有緩存。
私有緩存是個人緩存，包含單個用戶最常用的頁面。（瀏覽器的緩存是私有緩存）
公有緩存包含了某個用戶團體的常用的頁面。
二. 瀏覽器存儲
瀏覽器存儲（Browser Caching）是瀏覽器的一種優化機制。瀏覽器的緩存中保存了用戶經常訪問的一些文檔的副本，避免了一些重復的網絡請求，
瀏覽器能夠快速地讀取本地的數據，這樣就會加快網站的訪問速度。
1. 瀏覽器有哪幾種緩存機制
瀏覽器一共有九種緩存機制
打開瀏覽器 -> 點擊F12 -> 點Application
可以看到瀏覽器的多種緩存機制：
瀏覽器的幾種緩存機制
(1). http緩存
http緩存是基于http協議的瀏覽器文件緩存機制，當重復請求某一個文件時，瀏覽器可以根據協議的頭文件判斷是從服務器端請求文件還是從本地讀取文件。
上圖中的Frames展示的就是http緩存
a. 判斷過期的兩種方式：
Expires和Cache-Control:max-age
Expires：存的是絕對的過期的日期（例如：牛奶的保質期）
Cache-Control:max-age 存的是還可以保鮮多久，是相對時間，用秒做單位
b. 如果a中判斷緩存已經過期，那么就要進行緩存再驗證
緩存再驗證的兩種方式：
請求報文里攜帶
If-Modified-Since:Date和If-None-Match
If-Modified-Since:Date 對修改日期進行驗證
If-None-Match：<tags> 對實體標簽的版本標識符進行驗證
例如：
響應報文：
HTTP/1.1 200 OK Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT ETag: "10c24bc-4ab-457e1c1f" Content-Length: 12195
下一次的請求報文 ：
GET /i/yahoo.gif HTTP/1.1 Host: us.yimg.com If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT If-None-Match: "10c24bc-4ab-457e1c1f"
再次響應的報文：
HTTP/1.1 304 Not Modified
c. b中再驗證的結果有兩種：服務器中的文件未修改 和 服務器中的文件有修改
服務器中的文件未修改：緩存中的副本可以使用，那么瀏覽器直接從緩存讀取文檔，返回304
服務器中的文件有修改：緩存中的副本不能使用，那么直接從服務器端讀取文檔，返回200
(2). indexDB 客戶端本地數據庫（大型數據庫）
indexDB是瀏覽器中的一種數據庫，用來保存結構化數據。
indexDB設計的操作完全是異步進行的。
indexDB最大的特色是使用對象保存數據。
indexDB.open(“database”) 打開數據庫 或者 創建并打開數據庫；
indexDB.setVersion(“1.0”) 為數據庫指定一個版本號；
database.transaction(); 創建事務，對數據庫進行操作；
openCursor() 在對象存儲空間上調用這個方法，通過游標查找數據；
createIndex() 創建索引；
indexDB的并發問題；
(3). Cookies
1.cookies是什么
cookies是服務器用來標識web用戶的一小塊數據。
cookies的基本思想就是讓瀏覽器積累一組服務器特有的信息，并在客戶端和服務器端來回傳遞。
Cookies是由服務器端生成，發送給瀏覽器，瀏覽器會將Cookies的key/value保存到某個目錄下的文本文件內，
下次請求同一網站時就發送該Cookies給服務器（前提是瀏覽器設置為啟用cookies）。
Cookies一般存在用戶本地終端上，通常經過加密處理。
Cookies一般通過http請求中的頭部一起發送到服務器端。在客戶端和服務器端之間來回傳遞。
一條cookie記錄主要由鍵、值、域、過期時間、大小組成。
2. cookies的分類：持久cookies 和 會話cookies
一般而言，我們所說的cookie是指的持久cookie（設置了過期時間的cookie）
持久cookie：存儲在硬盤上；
持久cookie：是在過期時間之后消失。
持久cookie：是存在電腦硬盤里，是可以被同一個瀏覽器的所有頁面共享的（無論是多進程還是多線程瀏覽器）；
補充一點點：
不同瀏覽器之間不能共享cookie，因為每個瀏覽器存cookie路徑不是一樣的。
3. cookies的安全性問題：
第三方web站點使用持久cookie來跟蹤用戶，當用戶訪問同一個廣告公司提供的站點，瀏覽器就會回送之前設置的持久cookie，
廣告公司便可構建成一個用戶檔案和瀏覽習慣的詳盡數據集。
(4). storage類型
有如下方法：
clear()；
getItem(name)；
key(index)；
removeItem(name)；
setItem(name,value)；
localStorage對象：要訪問同一個localStorage對象，頁面必須同源;
sessionstorage對象：只能被最初給對象存儲的頁面所訪問;
修改localStorage對象、sessionstorage對象都會觸發 document 的 storage事件;
localstorage 和 sessionstorage 都是html5提供的在客戶端存儲數據的新方法。
這兩個都是windows對象的屬性。
其主要區別是：
localStorage - 沒有時間限制的數據存儲，主要用來存儲ajax返回的數據，加快下次訪問的渲染速度。
sessionStorage - 針對一個 session 的數據存儲。瀏覽器關閉后就刪除。
不同的瀏覽器無法共享localStorage或sessionStorage中的信息。
注意：cookies、localStorage、sessionStorage的區別
1. 存儲時間不同
持久cookies在過期日期之前都會存在;
localStorage會一直存在，除非主動刪除;
sessionStorage在標簽頁關閉之后就會刪除;
2. 存儲的位置不同
持久cookies是存在用戶終端，也就是電腦硬盤上，cookies始終在同源的http請求中攜帶，會在瀏覽器和服務器間來回傳遞。
localStorage和sessionStorage是存在瀏覽器端;
3. 存儲大小不同
cookies數據大小不能超過4k;
sessionStorage和localStorage存儲大小比cookies大得多，可以達到5M;
4. cookie還需要指定作用域，不允許跨域調用
localStorage、sessionStorage的使用場景：
localStorage實現離線操作，新聞編輯上傳功能，離線時保存在本地，有線時上傳；保存用戶配置項。
希望用戶關閉頁面之后就銷毀的數據可以保存在sessionStorage中;
(6). application cache 離線存儲
1.什么是application cache
application cache是HTML5的新特性，允許瀏覽器在本地存儲頁面所需要的資源，使得頁面離線也可以訪問。
在用戶沒有與因特網進行連接時，可以正常訪問站點或應用，在用戶與因特網連接時，更新用戶機器上的緩存文件。
application cache是從瀏覽器的緩存中分出來的一塊緩存區。
如何判斷設備是否離線？
if(navigator.onLine) {
//設備在線時的操作
} else {
//設備離線時的操作
}
window對象上定義了2個事件：
online: 設備從離線變成在線;
offline: 設備從在線變成離線.
