HTML 5 Web SQL操作客戶端資料庫
核心方法 本文將介紹規範中定義的三個核心方法:
1、openDatabase:這個方法使用現有資料庫或建立新資料庫建立資料庫物件。
2、transaction:這個方法允許我們根據情況控制事務提交或回滾。
3、executeSql:這個方法用於執行真實的SQL查詢。
開啟資料庫
openDatabase方法開啟一個已經存在的資料庫,如果資料庫不存在,它還可以建立資料庫,建立並開啟資料庫的語法如下:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
上面的openDatabase方法使用了下面五個引數:
1、資料庫名(mydb)
2、版本號(1.0)
3、描述(Test DB)
4、資料庫大小(2*1024*1024)
5、建立回撥
最後一個,即第五個引數“建立回撥”,在建立資料庫時會呼叫它,但即使沒有這個引數,一樣可以在執行時建立資料庫。
執行查詢
執行查詢使用database.transaction()函式,它只需要一個引數,下面是一個真實的查詢語句:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); });
上面的查詢將會在“mydb”資料庫中建立一個LOGS表。
插入操作
為了向表中插入新記錄,我們在上面的查詢語句中添加了一個簡單的SQL查詢,修改後的語句如下:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); });
在插入新記錄時,我們還可以傳遞動態值,如:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?'), [e_id, e_log]; });
這裡的e_id和e_log是外部變數,executeSql在陣列引數中將每個專案對映到“?”。
讀操作
如果要讀取已經存在的記錄,我們使用一個回撥捕獲結果,程式碼如下:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); }); db.transaction(function (tx) { tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { var len = results.rows.length, i; msg = "
Found rows: " + len + "
"; document.querySelector('#status').innerHTML += msg; for (i = 0; i < len; i++){ alert(results.rows.item(i).log ); } }, null); });
完整的例子
最後,我們在一個完整的HTML 5文件中展現前面講述的內容,同時使用瀏覽器來解析這個HTML 5文件。
Log message created and row inserted.
Found rows: 2
foobar
logmsg
原文連結:http://www.tutorialspoint.com/html5/html5_web_sql.htm