How to operate WebSQL database with H5

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:

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 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 >= 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  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! <p></p>Recommended reading: <p></p><p style="text-align: left;">How to use the prefix data-attribute and dataset<a href="http://www.php.cn/html5-tutorial-390175.html" target="_blank"></a><br></p><p style="text-align: left;">Drag event editor implements drag and drop upload Picture effect<a href="http://www.php.cn/html5-tutorial-390172.html" target="_blank"></a><br></p>

The above is the detailed content of How to operate WebSQL database with H5. For more information, please follow other related articles on the PHP Chinese website!