相似存儲

localStorage 長期存儲數據，瀏覽器關閉后數據不丟失； sessionStorage 數據在瀏覽器關閉后自動刪除。

離線的存儲：

service-worker 的標準。

在用戶沒有與因特網連接時，可以正常訪問站點或應用，在用戶與因特網連接時，更新用戶機器上的緩存文件。

原理：

HTML5 的離線存儲是基于一個新建的 appcache 文件的緩存機制（不是存儲技術），通過這個文件上的解析清單離線存儲資源，這些資源就會像 cookie 一樣被存儲了下來。

之后當網絡在處于離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。如何使用。

1、頁面頭部像下面一樣加入一個 manifest 的屬性。

2、在 cache.manifest 文件的編寫離線存儲的資源。

CACHE MANIFEST #v0.11
CACHE:
js/app.js css/style.css NETWORK:
resourse/logo.png FALLBACK:
/ /offline.html

• CACHE: 表示需要離線存儲的資源列表，由于包含 manifest 文件的頁面將被自動離線存儲，所以不需要把頁面自身也列出來。
• NETWORK: 表示在它下面列出來的資源只有在在線的情況下才能訪問，他們不會被離線存儲，所以在離線情況下無法使用這些資源。不過，如果在 CACHE 和 NETWORK 中有一個相同的資源，那么這個資源還是會被離線存儲，也就是說 CACHE 的優先級更高。
• FALLBACK: 表示如果訪問第一個資源失敗，那么就使用第二個資源來替換他，比如上面這個文件表示的就是如果訪問根目錄下任何一個資源失敗了，那么就去訪問 offline.html 。

3、在離線狀態時，操作 window.applicationCache 進行需求實現。

service-worker

如何更新緩存：

（1）更新 manifest 文件。

（2）通過 javascript 操作。

（3）清除瀏覽器緩存。

注意事項：

（1）瀏覽器對緩存數據的容量限制可能不太一樣（某些瀏覽器設置的限制是每個站點 5MB）。

（2）如果 manifest 文件，或者內部列舉的某一個文件不能正常下載，整個更新過程都將失敗，瀏覽器繼續全部使用老的緩存。

（3）引用 manifest 的 html 必須與 manifest 文件同源，在同一個域下。

（4）FALLBACK 中的資源必須和 manifest 文件同源。

（5）當一個資源被緩存后，該瀏覽器直接請求這個絕對路徑也會訪問緩存中的資源。

（6）站點中的其他頁面即使沒有設置 manifest 屬性，請求的資源如果在緩存中也從緩存中訪問。

（7）當 manifest 文件發生改變時，資源請求本身也會觸發更新。