HTML5中的本地、WebSql、離線應用存儲

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更新緩存；