前端HTML5幾種存儲方式

h5之前，存儲主要是用cookies。cookies缺點有在請求頭上帶着數據，大小是4k之內。主Domain污染。

主要應用：購物車、客戶登錄

對於IE瀏覽器有UserData，大小是64k,只有IE瀏覽器支持。

HTML5 提供了兩種在客戶端存儲數據的新方法：

• localStorage - 沒有時間限制的數據存儲
• sessionStorage - 針對一個 session 的數據存儲

1.本地存儲localstorage

localStorage 方法存儲的數據沒有時間限制。第二天、第二周或下一年之后，數據依然可用。

存儲方式：

以鍵值對(Key-Value)的方式存儲，永久存儲，永不失效，除非手動刪除。

 

大小：

每個域名5M

 

支持情況：

注意：IE9 localStorage不支持本地文件，需要將項目署到服務器，才可以支持！

 

檢測方法：

1 2 3 4 5

if(window.localStorage){   alert('This browser supports localStorage'); }else{   alert('This browser does NOT support localStorage'); }

 

常用的API：

getItem //取記錄

setIten//設置記錄

removeItem//移除記錄

key//取key所對應的值

clear//清除記錄

存儲的內容：

數組，圖片，json，樣式，腳本。。。（只要是能序列化成字符串的內容都可以存儲）

 

2.本地存儲sessionstorage

HTML5 的本地存儲 API 中的 localStorage 與 sessionStorage 在使用方法上是相同的，區別在於 sessionStorage 在關閉頁面后即被清空，而 localStorage 則會一直保存。

 

3.離線緩存（application cache）

本地緩存應用所需的文件

使用方法：

①配置manifest文件

頁面上：

1 2 3 4

<! DOCTYPE  HTML> < html  manifest="demo.appcache"> ... </ html >

Manifest 文件：

manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。

manifest 文件可分為三個部分：

①CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存

②NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存

③FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）

完整demo：

1 2 3 4 5 6 7 8 9 10

CACHE MANIFEST # 2016-07-24 v1.0.0 /theme.css /main.js   NETWORK: login.jsp   FALLBACK: /html/ /offline.html

服務器上：manifest文件需要配置正確的MIME-type，即 "text/cache-manifest"。

如Tomcat:

1 2 3 4

< mime-mapping >       < extension >manifest</ extension >       < mime-type >text/cache-manifest</ mime-type > </ mime-mapping >

常用API：

核心是applicationCache對象，有個status屬性，表示應用緩存的當前狀態：

0（UNCACHED） :  無緩存， 即沒有與頁面相關的應用緩存

1（IDLE） : 閑置，即應用緩存未得到更新

2 （CHECKING） : 檢查中，即正在下載描述文件並檢查更新

3 （DOWNLOADING） : 下載中，即應用緩存正在下載描述文件中指定的資源

4 （UPDATEREADY） : 更新完成，所有資源都已下載完畢

5 （IDLE） :  廢棄，即應用緩存的描述文件已經不存在了，因此頁面無法再訪問應用緩存

 

相關的事件：

表示應用緩存狀態的改變：

checking : 在瀏覽器為應用緩存查找更新時觸發

error : 在檢查更新或下載資源期間發送錯誤時觸發

noupdate : 在檢查描述文件發現文件無變化時觸發

downloading : 在開始下載應用緩存資源時觸發

progress：在文件下載應用緩存的過程中持續不斷地下載地觸發

updateready : 在頁面新的應用緩存下載完畢觸發

cached : 在應用緩存完整可用時觸發

 

Application Cache的三個優勢：

① 離線瀏覽

② 提升頁面載入速度

③ 降低服務器壓力

注意事項：

1. 瀏覽器對緩存數據的容量限制可能不太一樣（某些瀏覽器設置的限制是每個站點 5MB）
2. 如果manifest文件，或者內部列舉的某一個文件不能正常下載，整個更新過程將視為失敗，瀏覽器繼續全部使用老的緩存
3. 引用manifest的html必須與manifest文件同源，在同一個域下
4. 瀏覽器會自動緩存引用manifest文件的HTML文件，這就導致如果改了HTML內容，也需要更新版本才能做到更新。
5. manifest文件中CACHE則與NETWORK，FALLBACK的位置順序沒有關系，如果是隱式聲明需要在最前面
6. FALLBACK中的資源必須和manifest文件同源
7. 更新完版本后，必須刷新一次才會啟動新版本（會出現重刷一次頁面的情況），需要添加監聽版本事件。
8. 站點中的其他頁面即使沒有設置manifest屬性，請求的資源如果在緩存中也從緩存中訪問
9. 當manifest文件發生改變時，資源請求本身也會觸發更新

點我參考更多資料！

離線緩存與傳統瀏覽器緩存區別：

1. 離線緩存是針對整個應用，瀏覽器緩存是單個文件

2. 離線緩存斷網了還是可以打開頁面，瀏覽器緩存不行

3. 離線緩存可以主動通知瀏覽器更新資源