[HTML5]Web SQL Database数据库详解

Web SQL Database介绍

Web SQL数据库API实际上不是HTML5规范的组成部门,而是单独的规范。它通过一套API来操纵客户端的数据库。Safari、Chrome、Firefox、Opera等主流浏览器都已经支持Web SQL Database。

浏览器增加了一个小型的数据库的功能,可以在开发人员工具中的Resources标签中看到相关信息,如下图所示:

Web SQL 用法详解

Web SQL数据库有三个核心的方法

1.打开数据库openDatabase()方法

此方法创建数据库对象,既可以使用已有的数据库,也可以创建新的数据库。

window.openDatabase("mydata","1.0","数据库描述",20000);

openDatabase方法说明

返回一个对象链接。

2.事务transaction()方法

此方法可以用于控制事务处理,执行提交操作或回滚操作。

database.transaction(函数(obj));

transaction方法说明

db.transaction(function(tx){

});

3.执行SQL命令executeSql()方法

database.executeSql(SQL语句,SQL参数,返回源,错误);

db.transaction(function(tx){

tx.executeSql("SQL语句");

})

HTML5 Web Database的示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5 WebSQL</title>
</head>
<body>
    <script type="text/javascript">
        var db=window.openDatabase('jzcoder','1.0','jzcoder的Web SQL',20000);
        if(db){
            //alert('数据库创建成功!');
        }
        db.transaction(function(jz){
            jz.executeSql("create table test (id int UNIQUE,title text)");
        })
        db.transaction(function(jz){
            jz.executeSql("insert into test values(?,?)",[2,'html5']);
            //jz.executeSql("insert into test values(1,'JQuery')");
            //jz.executeSql("delete from test where title='html5'");
        })
        db.transaction(function(jz){
            //jz.executeSql("insert into test values(?,?)",[2,'html5']);
            jz.executeSql("insert into test values(1,'JQuery')");
            //jz.executeSql("delete from test where title='html5'");
        })
        db.transaction(function(jz){
            jz.executeSql("select * from test",[],function(jz,rs){
                for(var i=0,len=rs.rows.length;i<len;i++){
                    document.write(rs.rows.item(i)['title']+'<br/>');
                }
            },function(jz){
            });
        })
    </script>
</body>
</html>

示例代码运行后,Web SQL 存储内容如下图

Web SQL数据库存储内容

分享到:更多 ()

抢沙发

评论前必须登录!