清單 1. clock 應用**
the time is:
/* clock.css */
output
/* clock.js */
settimeout(function () , 1000);
當使用者在離線狀態下訪問「clock.html」時，頁面將無法展現。為了支援離線訪問，開發者必須新增 cache manifest 檔案，指明需要快取的資源。這個例子中的 cache manifest 檔案為「clock.manifest」，它宣告了 3 個需要快取的資源檔案「clock.html」、「clock.css」和「clock.js」。
清單 2. clock.manifest **
cache manifest
clock.html
clock.css
clock.js
新增了 cache manifest 檔案後，還需要修改「clock.html」，把 標籤的 manifest 屬性設定為「clock.manifest」。修改後的「clock.html」**如下。
清單 3. 設定 manifest 後的 clock.html **
the time is:
清單 4. cache manifest 示例**
cache manifest
# 上一行是必須書寫的。
images/sound-icon.png
images/background.png
network:
comm.cgi
# 下面是另一些需要快取的資源，在這個示例中只有乙個 css 檔案。
cache:
style/default.css
fallback:
/files/projects /projects
其中最常用的介面是 getitem 和 setitem。getitem 用於獲取指定 key 的 value，而 setitem 用於設定指定 key 的 value。
dom storage 示例
這裡給出乙個使用了 sessionstorage 的例子，localstorage 的用法與它相同。首先使用 setitem 新增了乙個名為「username」的項，它的值是「developerworks」。然後，呼叫 getitem 得到「username」的值，並且彈出提示框顯示它。最後，呼叫 removeitem 刪除「username」。
清單 6 dom storage 示例**
web sql database
除了 dom storage 以外，html5 中還有另外一種資料儲存方式 web sql database。它提供了基本的關聯式資料庫功能，支援頁面上的複雜的、互動式的資料儲存。它既可以用來儲存使用者產生的資料，也可以作為從伺服器獲取資料的本地快取記憶體。例如可以把電子郵件、日程等資料儲存到資料庫中。web sql database 支援資料庫事務的概念，從而保證了即使多個瀏覽器視窗操作同一資料，也不會產生衝突。
web sql database 基本用法
建立和開啟資料庫
使用資料庫的第一步是建立並開啟資料庫，api 是 opendatabase。當資料庫已經存在時，opendatabase 僅僅開啟資料庫；如果這個資料庫不存在，那麼就建立乙個空資料庫並且開啟它。opendatabase 的定義是：
database opendatabase(in domstring name, in domstring version,
in domstring displayname, in unsigned long estimatedsize,
in optional databasecallback creationcallback);
name：資料庫名。
version：資料庫版本。
displayname：顯示名稱。
estimatedsize：資料庫預估長度（以位元組為單位）。
creationcallback：**函式。
執行事務處理
在開啟資料庫以後，就可以使用事務 api transaction。每乙個事務作為運算元據庫的原子操作，不會被打斷，從而避免了資料衝突。transaction 的定義是：
void transaction(in sqltransactioncallback callback,
in optional sqltransactionerrorcallback errorcallback,
in optional sqlvoidcallback successcallback);
callback：事務**函式，其中可以執行 sql 語句。
errorcallback：出錯**函式。
successcallback：執行成功**函式。
執行 sql 語句
在事務的**函式 callback 中，可以執行 sql 語句，api 是 executesql。executesql 的定義是：
void executesql(in domstring sqlstatement,
in optional objectarray arguments, in optional sqlstatementcallback callback,
in optional sqlstatementerrorcallback errorcallback);
sqlstatement：sql 語句。
arguments：sql 語句需要的引數。
callback：**函式。
errorcallback：出錯**函式。
web sql database 示例
下面通過乙個例子說明 web sql database 的基本用法。它首先呼叫 opendatabase 建立了名為「foodb」的資料庫。然後使用 transaction 執行兩條 sql 語句。第一條 sql 語句建立了名為「foo」的表，第二條 sql 語句向表中插入一條記錄。
清單 7 web sql database 示例**
var db = opendatabase('foodb', '1.0', 'foodb', 2 * 1024);
db.transaction(function (tx) );
這個頁面的原始檔是 index.html，它的**如清單 8 所示。
清單 8 頁面 html **
在 body 中宣告了乙個按鈕和乙個無序列表。當按下「new note」按鈕時，newnote 函式將被呼叫，它用來新增一條新的便簽。而無序列表初始為空，它是用來顯示便簽的列表。
cache manifest 檔案
定義 cache manifest 檔案，宣告需要快取的資源。在這個例子中，需要快取「index.html」、「server.js」、「data.js」和「ui.js」等 4 個檔案。除了前面列出的「index.html」外，「server.js」、「data.js」和「ui.js」分別包含伺服器相關、資料儲存和使用者介面**。cache manifest 檔案定義如下。
清單 9 cache manifest 檔案
cache manifest
index.html
server.js
data.js
ui.js
使用者介面**
使用者介面**定義在 ui.js 中。
清單 10 使用者介面** ui.js
function newnote() }
function add(title)
function remove(title)
function adduiitem(title) }
} ui.js 中的**包含新增便簽和刪除便簽的介面操作。
新增便簽
使用者點選「new note」按鈕，newnote 函式被呼叫。
newnote 函式會彈出對話方塊，使用者輸入新便簽內容。newnote 呼叫 add 函式。
add 函式分別呼叫 adduiitem 和 adddataitem 新增頁面元素和資料。adddataitem **將在後面列出。
adduiitem 函式在頁面列表中新增一項。並指明 ondblclick 事件的處理函式是 remove，使得雙擊操作可以刪除便簽。
刪除便簽
使用者雙擊某便簽時，呼叫 remove 函式。
remove 函式分別呼叫 removeuiitem 和 removedataitem 刪除頁面元素和資料。removedataitem 將在後面列出。
removeuiitem 函式刪除頁面列表中的相應項。
資料儲存**
資料儲存**定義在 data.js 中。
清單 11 資料儲存** data.js
var storage = window['localstorage'];
var i = 0;
// 和伺服器同步新增操作
var str = storage.getitem("toadd");
if(str != null)
function removeserveritem(title)
function getserveritems()
由於這部分**與伺服器有關，這裡只說明各個函式的功能，具體實現可以根據不同伺服器編寫**。
在伺服器中新增一項：addserveritem
在伺服器中刪除一項：removeserveritem
返回伺服器中儲存的便簽列表：getserveritems
HTML5 離線儲存
首先來講解下離線儲存的使用方法，說起來也很簡單。只要在你的頁面頭部像下面一樣加入乙個manifest的屬性就可以了。然後cache.manifest檔案的書寫方式，就像下面這樣 cache manifest v0.11 cache css style.css network resourse log...
HTML5 離線儲存
首先來講解下離線儲存的使用方法，說起來也很簡單。只要在你的頁面頭部像下面一樣加入乙個manifest的屬性就可以了。manifest cache.manifest html 然後cache.manifest檔案的書寫方式，就像下面這樣 cache manifest v0.11 cache css s...
html5 離線儲存
資料 quzishen manifest檔案 1 cache manifest 2 上面一句必須 manifest檔案內容型別必須配置為text cache manifest傳送到瀏覽器 3 v1.0.0 版本號 如果想更新快取內容,只要修改下manifest檔案即可,如改版本號v1.0.1 45 ...