廣告：

1. HTML5存儲(chǔ)相關(guān)API

a) Localstorage 本地存儲(chǔ)

b) Web Sql DataBase 本地?cái)?shù)據(jù)庫(kù)存儲(chǔ)

c) .manifest 離線應(yīng)用存儲(chǔ)

2. HTML5 localStorage 本地存儲(chǔ)：

a) 本地存儲(chǔ)是一個(gè)window的屬性：, 相當(dāng)于一個(gè)大型的Cookie;

b) window.localStorage :

c) set方法：

i. localStorage.t1 = “aaa”;

ii. localStorage[t2] = “bbb”;

iii. localStorage.setItem(“t3”, “ccc”);

d) get方法：

i. localStorage.t1;

ii. localStorage[t1];

iii. localStorage.getItem(“t1”);

e) delete方法：

i. localStorage.removeItem();

ii. localStorage.clear(); // 清除所有；

f) 遍歷方法：

i. localStorage.length;

ii. localStorage.key();

3. HTML5 Web Sql Database 數(shù)據(jù)庫(kù)：

a) Web Sql 數(shù)據(jù)庫(kù)API 實(shí)際上不是HTML5規(guī)范的組成部分；

b) 在HTML5之前就已經(jīng)存在了，是單獨(dú)的規(guī)范；

c) 它是將數(shù)據(jù)以數(shù)據(jù)庫(kù)的形式存儲(chǔ)在客戶端，根據(jù)需求去讀��；

d) 跟Storage的區(qū)別是： Storage和Cookie都是以鍵值對(duì)的形式存在的；

e) Web Sql 更方便于檢索，允許sql語(yǔ)句查詢；

f) 讓瀏覽器實(shí)現(xiàn)小型數(shù)據(jù)庫(kù)存儲(chǔ)功能；

g) 這個(gè)數(shù)據(jù)庫(kù)是集成在瀏覽器里面的，目前主流瀏覽器基本都已支持；

4. HTML5 Web DataBase 操作：

a) openDatabase() :

i. window.openDatabase(“數(shù)據(jù)庫(kù)名”,”指定數(shù)據(jù)庫(kù)版本1.0或2.0”,”數(shù)據(jù)庫(kù)描述”,數(shù)據(jù)庫(kù)大小，字節(jié));

ii. 創(chuàng)建數(shù)據(jù)庫(kù)對(duì)象，可以使用已有數(shù)據(jù)庫(kù)，也可以創(chuàng)建新的數(shù)據(jù)庫(kù)；

iii. 返回一個(gè)對(duì)象；

b) transaction() :

i. database.transaction(fn(obj));

ii. 用于觸發(fā)操作；參數(shù)是一個(gè)匿名函數(shù)；

c) executeSql() :

i. tx.executeSql(sql語(yǔ)句,sql參數(shù), 返回源,錯(cuò)誤);

ii. 用于執(zhí)行sql

5. HTML5 本地離線應(yīng)用存儲(chǔ)：

a) 與HTML5 本地存儲(chǔ)、本地?cái)?shù)據(jù)庫(kù)的關(guān)系；

6. 離線應(yīng)用：

a) Web2.0技術(shù)鼓勵(lì)個(gè)人參與，每個(gè)人都是web內(nèi)容的撰寫(xiě)者，如微博；

b) Web應(yīng)用能夠提供離線的功能，讓用戶在沒(méi)有網(wǎng)絡(luò)的地方也能進(jìn)行內(nèi)容撰寫(xiě)，等到有網(wǎng)絡(luò)的時(shí)候，再同步到web上；

c) 離線應(yīng)用在首次加載的時(shí)候把所有資源下載下來(lái)，緩存到本地，離線應(yīng)用與瀏覽器的緩存是不同的，我們可以指定緩存的內(nèi)容，也可以指定那些東西是需要讀取數(shù)據(jù)庫(kù)的；

d) HTML5對(duì)離線功能的支持，在第一次訪問(wèn)的時(shí)候會(huì)去訪問(wèn)服務(wù)器，并且下載一個(gè)存儲(chǔ)清單，從清單中依次下載里面的內(nèi)容，存儲(chǔ)到指定位置，當(dāng)我們清除瀏覽器緩存的時(shí)候，是不會(huì)清除到這些內(nèi)容的，這些內(nèi)容是指定存儲(chǔ)的，瀏覽器二次訪問(wèn)的時(shí)候，就算是斷網(wǎng)了還是可以去訪問(wèn)這些緩存到本地的內(nèi)容的；用戶在斷網(wǎng)期間的操作，通過(guò)web sql存儲(chǔ)下來(lái)，等聯(lián)網(wǎng)的時(shí)候?qū)⒈镜氐臄?shù)據(jù)傳上去；

7. HTML5 實(shí)現(xiàn)離線應(yīng)用 操作：

a) 配置服務(wù)器：

i. 讓服務(wù)器支持.manifest類(lèi)型文件；

ii. AddType text/cache-manifest .manifest

b) 創(chuàng)建manifest文件： (存儲(chǔ)清單)

i. CACHE MANIFEST // 聲明文件頭部

ii. #This is a comment

iii. CACHE // 離線存儲(chǔ)文件

iv. NETWORK // 需要網(wǎng)絡(luò)調(diào)用的文件

v. FALLBACK // 資源失效或不可用時(shí)更新文件

c) 關(guān)聯(lián)manifest文件到 html文檔

8. HTML5離線內(nèi)容更新：

a) 自動(dòng)更新：

b) 手動(dòng)更新：

i. 檢測(cè)window.applicationCache.status的值；如果是UPDATEREADY

ii. 使用 window.applicationCache.update更新緩存；

其他html5離線數(shù)據(jù)庫(kù)

Indexed Database API 數(shù)據(jù)庫(kù) (IndexedDB )

Web sql數(shù)據(jù)庫(kù)

廣告：