本地数据库 - Web SQL Database HTM5

ゝ一世哀愁。 2022-06-12 07:09 115阅读 0赞

本地数据库 - 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、创建回调

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