如何用HTML5操作WebSQL数据库

互联网 18-6-9

下面通过本文给大家分享HTML5操作WebSQL数据库的实例代码，感兴趣的朋友一起看看吧

HTML代码：

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

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 < 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(); }

我们有两个方法来进行软件设计：一个是让其足够的简单以至于让BUG无法藏身；另一个就是让其足够的复杂，让人找不到BUG。前者更难一些。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！