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

a) Localstorage 本地存儲

b) Web Sql DataBase 本地數(shù)據(jù)庫存儲

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

2. HTML5 localStorage 本地存儲：

a) 本地存儲是一個window的屬性：, 相當(dāng)于一個大型的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ù)庫：

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

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

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

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

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

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

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

4. HTML5 Web DataBase 操作：

a) openDatabase() :

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

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

iii. 返回一個對象；

b) transaction() :

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

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

c) executeSql() :

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

ii. 用于執(zhí)行sql

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

a) 與HTML5 本地存儲、本地數(shù)據(jù)庫的關(guān)系；

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

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

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

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

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

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

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

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

ii. AddType text/cache-manifest .manifest

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

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

ii. #This is a comment

iii. CACHE // 離線存儲文件

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

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

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

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

a) 自動更新：

b) 手動更新：

i. 檢測window.applicationCache.status的值；如果是UPDATEREADY

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

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

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

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