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 data-role= main >
JS代碼：
 

/** * HTML5 操作本地WebSQL數據庫 * 作者：汪政 * 時間：2017/08/26 15：03：19var 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 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。前者更難一些。
以上就是詳解HTML5如何操作WebSQL數據庫的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。