webSQL

時間 2019-12-13

標籤 websql 简体版

原文原文鏈接

上一節講述了localStorage,sessionStorage本地存儲，可是如何實現本地數據庫存儲呢？javascript

這一節將講述本地存儲方式websql存儲。html

websql存儲方式一共有如下幾個方法java

openDatabase:這個方法使用現有的數據庫或新建數據庫來建立數據庫對象。jquery

transaction：這個方法容許咱們執行事務處理;web

executeSql:這個方法用於執行sql語句;sql

1 var db = openDatabase(name,version,displayName,estimateSize,creationCallback);數據庫

name:數據庫的名字;json

version:數據庫的版本號;瀏覽器

displayName:數據庫的描述;session

estimateSize:數據庫保存數據的大小;

createCallback:回調函數：

2 調用transaction來執行sql語句

transaction(function(tx){})

tx:回調函數所接收的參數，此參數爲transaction對象的引用。

3 調用executeSql 方法來表示處理事務

transaction.executeSql(sql,[],dataHandler,errorHandler);

sql:要執行的sql語句;

[ ]:sql語句中的佔位符「？」所對應的參數。

dataHandler：執行sql語句成功時調用的回調函數：

errorHandler:執行sql語句失敗時調用的回調函數。

先貼代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webSQL</title>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //初始化數據庫
        function initDatabase(){
            var db =getCurrentDB();
            if(!db){
                alert('您的瀏覽器不支持HTML本地數據庫');
                return ;
            }
            db.transaction(function(trans){
                trans.executeSql('create table if not exists Demo(uName text null,title text null,words text null)',[],function(trans,result){},
                        function(trans,message){

                        });
            })
        }
        //建立數據庫
      function getCurrentDB(){
          var db = openDatabase('data.db','1.0','demo data',1024*1024);
          return db;
      }
        $(function(){
            //初始化數據庫
            initDatabase();
            $("#save").on('click',function(){
                var txtName = $('#userName').val();
                var txtTitle= $('#userTitle').val();
                var txtWords = $('#userContent').val();
                //執行sql腳原本插入數據
                var db = getCurrentDB();
                db.transaction(function(trans){
                    trans.executeSql('insert into Demo(uName,title,words)values(?,?,?)',[txtName,txtTitle,txtWords],function(ts,data){},function(ts,message){
                        alert(message);
                    })
                })
            })

            //將數據展現到表格中
            $("#showContent").on('click',function(){
                showAllTheData();
            });

            //顯示全部數據庫中的數據到頁面中
            function showAllTheData(){
                $('#showTable').empty();
                var db =getCurrentDB();
                db.transaction(function(trans){
                    trans.executeSql('select * from Demo',[],function(ts,data){
                        if(data){
                            //循環記錄中的數據
                            for(var i=0;i<data.rows.length;i++){
                                //獲取每一行數據的json對象（鍵值對組成),將數據拼接成表格中的一行行數據
                                appendDataToTable(data.rows.item(i));
                            }
                        }
                    },function(ts,message){
                        alert(message);
                    })
                })
            }
            function appendDataToTable(data){
                var txtName =data.uName;
                var txtTitle =data.title;
                var txtWords =data.words;
                var strHTML ='';
                strHTML+='<tr>';
                strHTML += "<td>"+txtName+"</td>";
                strHTML += "<td>"+txtTitle+"</td>";
                strHTML += "<td>"+txtWords+"</td>";
                strHTML+='</tr>';
                $("#showTable").append(strHTML);
            }
        })







    </script>
</head>
<body>
<table>
    <tr>
        <td>用戶名:</td>
        <td><input type="text" id="userName"/></td>
    </tr>
    <tr>
        <td>標題:</td>
        <td><input type="text" id="userTitle"/></td>
    </tr>
    <tr>
        <td>留言:</td>
        <td><input type="text" id="userContent"/></td>
    </tr>
</table>
<input type="button" id="save" value="保存" />
<input type="button" id="showContent" value="展現你的信息"/>
<table id ='showTable'>

</table>
</body>
</html>

相關標籤/搜索

websql

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。