HTML5的另一項功能，本地端資料庫，很可惜IE8、9目前尚未支援，採用的是SQLite的嵌入式資料庫，試寫了一次，還蠻簡單的，令人眼花撩亂的call back function除外

<!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>
 

 擷取.PNG  

arrow
arrow
    全站熱搜

    忙裡偷閒 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄