Detailed explanation of how HTML5 operates WebSQL database-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Detailed explanation of how HTML5 operates WebSQL database

巴扎黑

Sep 02, 2017 am 10:03 AM

html5 web

Let me share with you the example code of HTML5 operating WebSQL database through this article. Friends who are interested can take a look.

HTML code:

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

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 >= 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 < 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

We have two ways to design software: one is to make it sufficient Make it simple so that bugs cannot hide; the other is to make it complex enough so that people can’t find bugs. The former is more difficult.

The above is the detailed content of Detailed explanation of how HTML5 operates WebSQL database. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn