小強的HTML5行動開發之路（20）－HTML5 Web SQL Database-H5教程-PHP中文網

首頁

web前端

H5教程

小強的HTML5行動開發之路（20）－HTML5 Web SQL Database

黄舟

Jan 22, 2017 pm 01:59 PM

一、Web Database介紹

WebSQL資料庫API其實不是HTML5規範的組成部分，而是單獨的規範。它透過一套API來操縱客戶端的資料庫。 Safari、Chrome、Firefox、Opera等主流瀏覽器都已經支援WebSQL Database

WebSQL資料庫有三種核心方法：

1）開啟資料庫openDatabase()方法：

此方法建立資料庫對象，既可以使用現有的資料庫資料庫，也可以建立新的資料庫。

2）事務transaction()方法：

此方法可以用於控制事務處理，執行提交操作或回滾操作。

3）執行SQL指令executeSql()方法：

此方法用於執行SQL查詢。

二、Web database操作使用

1）開啟資料庫openDatabase()方法：

此方法建立資料庫的資料庫

小強的HTML5行動開發之路（20）－HTML5 Web SQL Database

2）事務transaction()方法：

此方法可以用於控制事務處理，執行提交操作或回滾操作。

小強的HTML5行動開發之路（20）－HTML5 Web SQL Database

3）執行SQL指令executeSql()方法：

此方法用於執行SQL查詢。

小強的HTML5行動開發之路（20）－HTML5 Web SQL Database

三、實例

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

登入後複製

小強的HTML5行動開發之路（20）－HTML5 Web SQL Database