How to operate WebSQL database with H5-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

How to operate WebSQL database with H5

Mar 27, 2018 am 10:10 AM

html5 web

This time I will show you how to operate the WebSQL database in H5. What are the precautions for H5 to operate the WebSQL database? The following is a practical case, let's take a look.

HTML code:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head lang=&quot;en&quot;&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;列车时刻表查询&lt;/title&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css&quot; /&gt;
        &lt;script src=&quot;http://code.jquery.com/jquery-1.11.1.min.js&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;script src=&quot;js/connect.js&quot;&gt;&lt;/script&gt;
    &lt;body onload=&quot;init()&quot;&gt;
        &lt;p data-role=&quot;page&quot; id=&quot;pageone&quot;&gt;
            &lt;p data-role=&quot;header&quot; data-position=&quot;fixed&quot;&gt;
                &lt;h1&gt;列车时刻表查询&lt;/h1&gt;
            &lt;/p&gt;
            &lt;p data-role=&quot;main&quot; class=&quot;ui-content&quot;&gt;
                &lt;p align=&quot;center&quot;&gt;请给我留言&lt;/p&gt;
                &lt;table data-role=&quot;table&quot; class=&quot;ui-responsive&quot;&gt;
                    &lt;thead&gt;
                        &lt;tr&gt;
                            &lt;th&gt;姓名：&lt;/th&gt;
                            &lt;th&gt;留言：&lt;/th&gt;
                        &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;
                        &lt;tr&gt;
                            &lt;td&gt;&lt;input type=&quot;text&quot; id=&quot;name&quot;&gt;&lt;/td&gt;
                            &lt;td&gt;&lt;input type=&quot;text&quot; id=&quot;memo&quot;&gt;&lt;/td&gt;
                        &lt;/tr&gt;
                    &lt;/tbody&gt;
                &lt;/table&gt;
                &lt;button type=&quot;submit&quot; onclick=&quot;saveData()&quot;&gt;留言&lt;/button&gt;
                &lt;table data-role=&quot;table&quot; data-mode=&quot;&quot; class=&quot;ui-responsive&quot; id=&quot;datatable&quot;&gt;
                    &lt;!--这里是留言板的显示区域--&gt;
                &lt;/table&gt;
            &lt;/p&gt;
            &lt;!--
                作者：ceet@vip.qq.com
                时间：2017-08-26
                描述：底部TAB
            --&gt;
            &lt;p data-role=&quot;footer&quot; data-position=&quot;fixed&quot;&gt;
                &lt;p data-role=&quot;navbar&quot;&gt;
                    &lt;ul&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;index.html#index&quot; data-icon=&quot;grid&quot; class=&quot;ui-btn-active&quot;&gt;查询&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;index.html#detail&quot; data-rel=&quot;popup&quot; data-icon=&quot;star&quot;&gt;收藏&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;test.html&quot; data-icon=&quot;comment&quot;&gt;给我留言&lt;/a&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/p&gt;
            &lt;/p&gt;
            &lt;!--收藏功能--&gt;
            &lt;p data-role=&quot;popup&quot; id=&quot;myPopup&quot; class=&quot;ui-content&quot; data-theme=&quot;b&quot;&gt;
              &lt;a href=&quot;#&quot; data-rel=&quot;back&quot; class=&quot;ui-btn ui-btn-a ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right&quot;&gt;Close&lt;/a&gt;
              &lt;p&gt;收藏成功，暂且不做处理!.&lt;/p&gt;
              &lt;p&gt;请点击右上角有个关闭按钮&lt;/p&gt;
              &lt;p&gt;&lt;b&gt;提示：&lt;/b&gt; 你也可以点击弹窗的外部区域来关闭弹窗。&lt;/p&gt;
            &lt;/p&gt;
        &lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;

Copy after login

JS code:

/**
 * 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 &gt;= 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 &lt; rs.rows.length; i++) {
                showData(rs.rows.item(i))
            }
        })
    })
}
//添加数据
function addData(name, message, time) {
    db.transaction(function(tx) {
        tx.executeSql("INSERT INTO MsgData VALUES (?,?,?)", [name, message, time], function(tx, rs) {
                alert("留言成功！");
            },
            function(tx, error) {
                alert(error.source + "::" + error.message);
            }
    )
    })
}
//调用
function saveData() {
    var name = document.getElementById("name").value;
    var memo = document.getElementById("memo").value;
    var time = new Date().getTime();
    addData(name, memo, time);
    showAllData();
}

Copy after login

I believe you have mastered it after reading the case in this article Method, for more exciting information, please pay attention to other related articles on the php Chinese website!