首頁  >  文章  >  web前端  >  小強的HTML5行動開發之路(20)-HTML5 Web SQL Database

小強的HTML5行動開發之路(20)-HTML5 Web SQL Database

黄舟
黄舟原創
2017-01-22 13:59:371313瀏覽

一、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

以上就是 小強的HTML5移動開發之路(20)-HTML5 Web SQL Database的內容,更多內容相關網內容請注意.www.php. cn)!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn