1.Application Cache
HTML5引入應(yīng)用緩存,意味著web應(yīng)用可以進(jìn)行緩存,即使在沒有網(wǎng)絡(luò)的情況下也能使用。
application cache有三個特點(diǎn)
-
離線瀏覽
-
已緩存的資源加載速度更快
-
減少服務(wù)器負(fù)載,瀏覽器將只從服務(wù)器下載更新過或更改過的資源
使用方法就是在 html標(biāo)簽中添加一個manifest屬性
每個指定了 manifest 的頁面在用戶對其訪問時都會被緩存。如果未指定 manifest 屬性,則頁面不會被緩存(除非在 manifest 文件中直接指定了該頁面)。
manifest 文件的建議的文件擴(kuò)展名是:".appcache"。
<!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html>
manifest 文件是簡單的文本文件,它告知瀏覽器被緩存的內(nèi)容(以及不緩存的內(nèi)容)。
manifest 文件可分為三個部分:
-
CACHE MANIFEST – 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存
-
NETWORK – 在此標(biāo)題下列出的文件需要與服務(wù)器的連接,且不會被緩存
-
FALLBACK – 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時的回退頁面(比如 404 頁面)
一個完整的manifest文件
CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /404.html
2.localStorage & sessionStorage
HTML5 提供了兩種在客戶端存儲數(shù)據(jù)的新方法:
-
localStorage – 沒有時間限制的數(shù)據(jù)存儲
-
sessionStorage – 針對一個 session 的數(shù)據(jù)存儲
之前,這些都是由 cookie 完成的。但是 cookie 不適合大量數(shù)據(jù)的存儲,因?yàn)樗鼈冇擅總€對服務(wù)器的請求來傳遞,這使得 cookie 速度很慢而且效率也不高。
localStorage和sessionStorage都具有相同的操作方法,例如setItem()、getItem()和removeItem()等
localStorage和sessionStorage的方法:
setItem存儲value
用途:將value存儲到key字段
用法:.setItem( key, value)
代碼示例:
sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");
getItem獲取value
用途:獲取指定key本地存儲的值
用法:.getItem(key)
代碼示例:
var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");
removeItem刪除key
用途:刪除指定key本地存儲的值
用法:.removeItem(key)
代碼示例:
sessionStorage.removeItem("key"); localStorage.removeItem("site");
clear清除所有的key/value
用途:清除所有的key/value
用法:.clear()
sessionStorage不是一種持久化存儲,瀏覽器關(guān)閉之后會隨之清除。而localStorage用于持久化的本地存儲,除非主動刪除數(shù)據(jù),否則數(shù)據(jù)是永遠(yuǎn)不會過期的。
3.indexDB
indexDB是一種輕量級NOSQL數(shù)據(jù)庫。相比web sql(sqlite)更加高效,包括索引、事務(wù)處理和健壯的查詢功能。
它的特點(diǎn)包括:
-
一個網(wǎng)站可能有一個或多個 IndexedDB 數(shù)據(jù)庫,每個數(shù)據(jù)庫必須具有惟一的名稱。
-
一個數(shù)據(jù)庫可包含一個或多個對象存儲。一個對象存儲(由一個名稱惟一標(biāo)識)是一個記錄集合。每個記錄有一個鍵 和一個值。該值是一個對象,可擁有一個或多個屬性。鍵可能基于某個鍵生成器,從一個鍵路徑衍生出來,或者是顯式設(shè)置。一個鍵生成器自動生成惟一的連續(xù)正整數(shù)。鍵路徑定義了鍵值的路徑。它可以是單個 JavaScript 標(biāo)識符或多個由句點(diǎn)分隔的標(biāo)識符。(有點(diǎn)像列數(shù)據(jù)庫的特點(diǎn))
-
IndexedDB中,幾乎所有的操作都是采用了command->request->result的方式。比如查詢一條記錄,返回一個request,在request的result中得到查詢結(jié)果。又比如打開數(shù)據(jù)庫,返回一個request,在request的result中得到返回的數(shù)據(jù)庫引用。
-
indexedDB需要放到web服務(wù)器上才可以運(yùn)行。