Xiaoqiang's road to HTML5 mobile development (20) - HTML5 Web SQL Database-H5 Tutorial-php.cn

Xiaoqiang's road to HTML5 mobile development (20) - HTML5 Web SQL Database

黄舟

Release： 2017-01-22 13:59:37

Original

1356 people have browsed it

1. Introduction to Web Database

The WebSQL database API is actually not a component of the HTML5 specification, but a separate specification. It manipulates the client's database through a set of APIs. Safari, Chrome, Firefox, Opera and other mainstream browsers already support WebSQL Database

WebSQL database has three core methods:

1) Open the database openDatabase() method:

This method creates a database object, either using an existing database or creating a new database.

2) Transaction transaction() method:

This method can be used to control transaction processing, perform commit operations or rollback operations.

3) Execute SQL command executeSql() method:

This method is used to execute SQL queries.

2. Use Web database operation

##1) Open the database openDatabase() method:

This method creates a database object. You can use an existing database or create a new database.

Xiaoqiangs road to HTML5 mobile development (20) - HTML5 Web SQL Database

2) Transaction transaction() method:

This method can be used to control transaction processing, perform commit operations or rollback operations.

Xiaoqiangs road to HTML5 mobile development (20) - HTML5 Web SQL Database

3) Execute SQL command executeSql() method:

This method is used to execute SQL queries.

Xiaoqiangs road to HTML5 mobile development (20) - HTML5 Web SQL Database

3. Example

<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta charset="urf-8"/>  
    </head>  
    <body>  
        <script type="text/javascript">  
            //创建数据库  
            var db = window.openDatabase("dawanganban", "1.0","数据库描述",20000);  
            //创建数据表  
            db.transaction(function(tx) {  
                tx.executeSql("CREATE TABLE test (id int UNIQUE, mytitle TEXT, timestamp REAL)");  
            });  
            //插入数据  
            db.transaction(function(tx) {  
                tx.executeSql("INSERT INTO test (id, mytitle, timestamp) values(?, ?, ?)", [1, "WEB Database", new Date().getTime()], null, null);  
            });  
  
            //插入数据  
            db.transaction(function(tx) {  
                tx.executeSql("INSERT INTO test (id, mytitle, timestamp) values(?, ?, ?)", [2, "DaWanGanBan", new Date().getTime()], null, null);  
            });  
  
            //删除数据  
            /*  
            db.transaction(function(tx){  
                tx.executeSql("DELETE FROM test where mytitle=?",["WEB Database"],null,null);  
            });  
            */  
              
            //db.transaction(function(tx) {  
            //  tx.executeSql("DROP TABLE qqs");  
            //})  
  
            //db.transaction(function(tx) {  
            //  tx.executeSql("update test set mytitle=? where mytitle = &#39;fsafdsaf&#39;",[&#39;xp&#39;],null,null);  
            //});  
  
            //查询数据  
            db.transaction(function(tx) {  
                tx.executeSql("SELECT * FROM test", [],    
                function(tx, result) {  
                    for(var i = 0; i < result.rows.length; i++){   
                        document.write(&#39;<b>&#39; + result.rows.item(i)[&#39;mytitle&#39;] + &#39;</b><br />&#39;);   
                    }   
                }, function(){  
                    alert("error");  
                });   
            });   
        </script>  
    </body>  
</html>

Copy after login

Xiaoqiangs road to HTML5 mobile development (20) - HTML5 Web SQL Database

The above is Xiaoqiang’s HTML5 mobile development path (20)— —Contents of HTML5 Web SQL Database. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!