Html5數(shù)據(jù)庫API是以一個(gè)獨(dú)立規(guī)范形式出現(xiàn)，它包含三個(gè)核心方法：
1、openDatabase：這個(gè)方法使用現(xiàn)有數(shù)據(jù)庫或創(chuàng)建新數(shù)據(jù)庫創(chuàng)建數(shù)據(jù)庫對(duì)象。
2、transaction：這個(gè)方法允許我們根據(jù)情況控制事務(wù)提交或回滾。
3、executeSql：這個(gè)方法用于執(zhí)行真實(shí)的SQL查詢。
打開數(shù)據(jù)庫
openDatabase方法可以打開已經(jīng)存在的數(shù)據(jù)庫，不存在則創(chuàng)建：
var db = openDatabase('mydatabase', '2.0', my db', 2 * 1024);
openDatabasek中五個(gè)參數(shù)分別為：數(shù)據(jù)庫名、版本號(hào)、描述、數(shù)據(jù)庫大小、創(chuàng)建回調(diào)。創(chuàng)建回調(diào)沒有也可以創(chuàng)建數(shù)據(jù)庫。
執(zhí)行查詢
database.transaction()函數(shù)用來查詢，下面將在mydatabase數(shù)據(jù)庫中創(chuàng)建表t1：
var db = openDatabase(' mydatabase ', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');
});
插入操作
var db = openDatabase('mydatabase', '2.0', my db', 2 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');
tx.executeSql('INSERT INTO t1 (id, log) VALUES (1, "foobar")');
tx.executeSql('INSERT INTO t1 (id, log) VALUES (2, "logmsg")');
});
在插入新記錄時(shí)，我們還可以傳遞動(dòng)態(tài)值，如：
var db = openDatabase(' mydatabase ', '2.0', 'my db', 2 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');
tx.executeSql('INSERT INTO t1 (id,log) VALUES (?, ?'), [e_id, e_log];
//e_id和e_log是外部變量
});
讀操作
如果要讀取已經(jīng)存在的記錄，我們使用一個(gè)回調(diào)捕獲結(jié)果，代碼如下：
var db = openDatabase(mydatabase, '2.0', 'my db', 2*1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');
tx.executeSql('INSERT INTO t1 (id, log) VALUES (1, "foobar")');
tx.executeSql('INSERT INTO t1 (id, log) VALUES (2, "logmsg")');
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM t1, [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>Found rows: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
alert(results.rows.item(i).log );
}
}, null);
});
完整的例子
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
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")');
msg = '<p>Log message created and row inserted.</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>Found rows: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#status').innerHTML += msg;
}
}, null);
});
</script>
</head>
<body>
<div id="status" name="status">Status Message</div>
</body>
</html>
下面是在最新版本的Safari或Opera瀏覽器中產(chǎn)生的輸出結(jié)果。
Log message created and row inserted.
Found rows: 2
foobar
logmsg
