廣告：

1. HTML5存儲相關API

a) Localstorage 本地存儲

b) Web Sql DataBase 本地數據庫存儲

c) .manifest 離線應用存儲

2. HTML5 localStorage 本地存儲：

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

a) Web Sql 數據庫API 實際上不是HTML5規范的組成部分；

b) 在HTML5之前就已經存在了，是單獨的規范；

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

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

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

f) 讓瀏覽器實現小型數據庫存儲功能；

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

4. HTML5 Web DataBase 操作：

a) openDatabase() :

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

ii. 創建數據庫對象，可以使用已有數據庫，也可以創建新的數據庫；

iii. 返回一個對象；

b) transaction() :

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

ii. 用于觸發操作；參數是一個匿名函數；

c) executeSql() :

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

ii. 用于執行sql

5. HTML5 本地離線應用存儲：

a) 與HTML5 本地存儲、本地數據庫的關系；

6. 離線應用：

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

b) Web應用能夠提供離線的功能，讓用戶在沒有網絡的地方也能進行內容撰寫，等到有網絡的時候，再同步到web上；

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

d) HTML5對離線功能的支持，在第一次訪問的時候會去訪問服務器，并且下載一個存儲清單，從清單中依次下載里面的內容，存儲到指定位置，當我們清除瀏覽器緩存的時候，是不會清除到這些內容的，這些內容是指定存儲的，瀏覽器二次訪問的時候，就算是斷網了還是可以去訪問這些緩存到本地的內容的；用戶在斷網期間的操作，通過web sql存儲下來，等聯網的時候將本地的數據傳上去；

7. HTML5 實現離線應用 操作：

a) 配置服務器：

i. 讓服務器支持.manifest類型文件；

ii. AddType text/cache-manifest .manifest

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

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

ii. #This is a comment

iii. CACHE // 離線存儲文件

iv. NETWORK // 需要網絡調用的文件

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

c) 關聯manifest文件到 html文檔

8. HTML5離線內容更新：

a) 自動更新：

b) 手動更新：

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

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

其他html5離線數據庫

Indexed Database API 數據庫 (IndexedDB )

Web sql數據庫

廣告：