H5怎麼操作WebSQL資料庫

這次帶給大家H5怎麼操作WebSQL資料庫，H5操作WebSQL資料庫的注意事項有哪些，下面就是實戰案例，一起來看一下。

HTML程式碼：

nbsp;html>

    
        <meta>
        <title>列车时刻表查询</title>
        <meta>
        <link>
        <script></script>
        <script></script>
    
    <script></script>
    
        <p>
            </p><p>
                </p><h1 id="列车时刻表查询">列车时刻表查询</h1>
            
            <p>
                </p><p>请给我留言</p>
                

                                                                                                                                                                                                                                                                                                                            

姓名：	留言：

                留言                                                                                              

                

                    

                        
•                             查询                         
                        
•                             收藏                         
                        
•                             给我留言                         
                    

                                                       

              Close               

收藏成功，暂且不做处理!.

              

请点击右上角有个关闭按钮

              

提示： 你也可以点击弹窗的外部区域来关闭弹窗。

                          

JS程式碼：
 

/**
 * HTML5 操作本地WebSQL数据库
 * 作者：汪政
 * 时间：2017/08/26 15：03：19
 */
var datatable = null;
var db = openDatabase("MyData", "", "My Database", 1024 * 100);
//初始化函数方法
function init() {
    datatable = document.getElementById("datatable");
    showAllData();
}
//首先移除乱七八糟的东西
function removeAllData() {
    for(var i = datatable.childNodes.length - 1; i >= 0; i--) {
        datatable.removeChild(datatable.childNodes[i]);
    }
    var tr = document.createElement("tr");
    var th1 = document.createElement("th");
    var th2 = document.createElement("th");
    var th3 = document.createElement("th");
    th1.innerHTML = "姓名";
    th2.innerHTML = "留言";
    th3.innerHTML = "时间";
    tr.appendChild(th1);
    tr.appendChild(th2);
    tr.appendChild(th3);
    datatable.appendChild(tr);
}
//显示WebSQL中的数据
function showData(row) {
    var tr = document.createElement("tr");
    var td1 = document.createElement("td");
    td1.innerHTML = row.name;
    var td2 = document.createElement("td");
    td2.innerHTML = row.message;
    var td3 = document.createElement("td");
    var t = new Date();
    t.setTime(row.time);
    td3.innerHTML = t.toLocaleDateString() + " " + t.toLocaleTimeString();
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    datatable.appendChild(tr);
}
//显示所有的数据
function showAllData() {
    db.transaction(function(tx) {
        tx.executeSql("CREATE TABLE IF NOT EXISTS MsgData(name TEXT,message TEXT,time INTEGER)", []);
        tx.executeSql("SELECT * FROM MsgData", [], function(tx, rs) {
            removeAllData();
            for(var i = 0; i <p>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ </p><p>推薦閱讀：</p><p style="text-align: left;"><a href="http://www.php.cn/html5-tutorial-390175.html" target="_blank">前綴data-屬性和dataset的使用方法</a><br></p><p style="text-align: left;"><a href="http://www.php.cn/html5-tutorial-390172.html" target="_blank">Drag事件編輯器實作拖曳上傳圖片效果</a><br></p>

以上是H5怎麼操作WebSQL資料庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！