HTML5 Database

2011-05-30 17:11  1411人阅读  评论 (0)
Tags: html5

本地数据库 - Web SQL Database

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title>HTML5 WebDatabase</title>
    <script>
        var db=""
        window.onload=function(){
            if(window.openDatabase){
                //打开数据库,不存在数据库则会自动创建
                db = window.openDatabase("test", "1.0", "HTML5 Database API example", 200000);
                //创建表
                db.transaction(function (tx){
                    tx.executeSql("create table oo(id REAL UNIQUE, text TEXT)",[],function(tx){
                        alert("创建表成功");
                    },function(tx, error){
                        alert("创建表失败,错误信息:"+error.message );
                    });
                });
            }else{
                alert("不支持WebDatabase");
            }
        }
        //删除数据库表
        function drop(){
            db.transaction(function(tx){
                tx.executeSql("drop table oo",[],function(tx){
                    alert('删除数据库表成功');
                },function(tx,error){
                    alert("删除数据库表失败,错误信息:"+error.message);
                });
            });
            //释放资源
            db = null;
        }
        function add(){
            var num = Math.round(Math.random() * 10000); // random data
            var value = document.getElementById("text").value;
            db.transaction(function(tx){
                tx.executeSql("insert into oo(id,text) values(?,?)",[num,value],function(tx){
                    alert("添加成功");
                },function(tx, error){
                    alert("添加数据失败,错误信息:"+error.message);
                });
            });
        }
        function show(){
            db.transaction(function(tx){
                tx.executeSql("select * from oo",[],function(tx, result){
                    for (var i = 0; i < result.rows.length; i++) {
                        var item = result.rows.item(i);
                        alert(item['id']+":"+item['text']);
                    }
                },function(tx,error){
                    alert("查询数据失败,错误信息:"+error.message);
                });
            });
        }
    </script>
</head>
<body>
    <input type="text" id="text"/><br/>
    <input type="button" value="增加" onclick="add()"/><br/>
    <input type="button" value="查询" onclick="show()"/><br/>
    <input type="button" value="删除表" onclick="drop()"/><br/>
</body>
</html>

核心方法

本文将介绍规范中定义的三个核心方法:

1、openDatabase:这个方法使用现有数据库或创建新数据库创建数据库对象。
2、transaction:这个方法允许我们根据情况控制事务提交或回滚。
3、executeSql:这个方法用于执行真实的SQL查询。

打开数据库

openDatabase方法打开一个已经存在的数据库,如果数据库不存在,它还可以创建数据库,创建并打开数据库的语法如下:

上面的openDatabase方法使用了下面五个参数:

1、数据库名(mydb)
2、版本号(1.0)
3、描述(Test DB)
4、数据库大小(2*1024*1024)
5、创建回调

最后一个,即第五个参数“创建回调”,在创建数据库时会调用它,但即使没有这个参数,一样可以在运行时创建数据库。