H5游戏的上风有哪些_HTML5操作WebSQL数据库的实例代码

HTML5操作WebSQL数据库的实例代码   发布     下面通过本文给大家分享HTML5操作WebSQL数据库的实例代码,感兴趣的朋友一起看看吧
title 列车时刻表查询 /title meta name= viewport content= width=device-width,initial-scale=1 link rel= stylesheet href= mobile/1.4.5/jquery.mobile-1.4.5.min.css / script src= jquery-1.11.1.min.js /script script src= mobile/1.4.5/jquery.mobile-1.4.5.min.js /script /head script src= js/connect.js /script body onload= init() div data-role= page id= pageone div data-role= header data-position= fixed h1 列车时刻表查询 /h1 /div div data-role= main >

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 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数据库的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


数据库安全一直是后端人员广泛关注和需要预防的问题。但是自从HTML5引入本地数据库和WebSQL之后,前端开发对于数据库的安全也必须要有所了解和警惕。WebSQL的安全问题通常

相关阅读