HTML5的另一項功能，本地端資料庫
<!DOCTYPE html>
<html>
<head>
<title>Web SQL Database Test</title>
<script>
function pageLoad() {
//1024 * 1024 = 1 MB
//採用SQLite Script，Create Table :http://www.sqlite.org/lang_createtable.html
//W3C文件:http://www.w3.org/TR/webdatabase/#dom-sqltransaction-executesql
var SQLScript = 'create table if not exists tCustomer(id integer primary key autoincrement ,name varchar(10) default "")';
var db = openDatabase('dbBOM', '1.0', 'test database', 1024 * 1024);
document.getElementById('create').addEventListener('click', function ()
{
db.transaction(function (t)
{
t.executeSql(SQLScript);
}, function (e)
{
alert(e.message);
});
}, false);
document.getElementById('set').addEventListener('click', function ()
{
db.transaction(function (t)
{
t.executeSql("insert into tCustomer(name) values('andy')");
t.executeSql("insert into tCustomer(name) values('bill')");
},
function (e)
{
alert(e.message);
});
}, false);
document.getElementById('drop').addEventListener('click', function ()
{
db.transaction(function (t)
{
t.executeSql("drop table tCustomer"); },
function (e)
{
alert(e.message);
});
}, false);
document.getElementById('get').addEventListener('click', onGetData, false);
function onGetData()
{ db.readTransaction(function (t)
{
t.executeSql('select * from tCustomer', [], SetData);
});
}
function SetData(t, r)
{
for (var i = 0; i < r.rows.length; i++)
{
for (var o in r.rows.item(i))
{
alert(r.rows.item(i)[o]);
}
}
}
}
</script></head>
<body onload="pageLoad();">
<input value="建立資料表" id="create" type="button"><br>
<input value="刪除資料表" id="drop" type="button"><br>
<input value="插入資料" id="set" type="button"><br>
<input value="取得資料" id="get" type="button"><br>
</body>
</html>
沒有留言:
張貼留言