详解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 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教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。