html5本地数据库,html5 web sql
HTML代码：
！DOCTYPE html html head lang= en meta charset= UTF-8 标题列车时刻表查询/title meta name= viewport content= width=device-width，initial-scale=1 link rel= style sheet href= http://代码。jquery。com/mobile/1。4 .5/jquery。移动一号。4 .5 .量滴CSS /script src= http://代码。jquery。com/jquery-1。11 .1 .量滴js /script脚本src= http://代码。jquery。com/mobile/1.4列车时刻表查询/h1/div div data-role= main class= ui-content p align= center 请给我留言/p表数据-role= table class= ui响应主题姓名：/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 /div！-作者：ceet@vip.qq.com时间：2017-08-26 描述：底部TAB-div data-role=页脚 data-position=固定 div data-role= navbar ul阿利href= index。html # index data-icon= grid class= ui-BTN-active 查询/a/李阿利href= index。html # detail data-rel= popup data-icon= star 收藏/a/Li href=测试。html data-icon= comment 给我留言/a /li /ul /div /div！-收藏功能-div data-role= popup id= my popup 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 pb提示：/b你也可以点击弹窗的外部区域来关闭弹窗/p /div /div /body/htmlJS代码：
/** * HTML5操作本地WebSQL数据库* 作者：汪政* 时间：2017/08/26 15:03:19 */var datatable=null；var db=openDatabase(MyData ，，我的数据库,1024 * 100);//初始化函数方法函数init(){ datatable=document。getelementbyid(“datatable”)；showall data()；}//首先移除乱七八糟的东西函数移除所有数据(){ for(var I=datatable。子节点。长度-1；I=0；I-){ datatable。移除子级(数据表。子节点[I])；} var tr=文档。createelement( tr )；var TH1=文档。createelement(“th”)；var TH2=文档。createelement(“th”)；var th3=文档。createelement(“th”)；th1.innerHTML=姓名；th2.innerHTML=留言；th3.innerHTML=时间；tr。appendchild(TH1)；tr。appendchild(TH2)；tr。appendchild(th3)；数据表。appendchild(tr)；}//显示WebSQL中的数据函数showData(row){ var tr=document。createelement( tr )；var td1=文档。createelement(“TD”)；td1。innerhtml=row。姓名；var td2=文档。createelement(“TD”)；td2。innerhtml=row。消息；var td3=文档。createelement(“TD”)；var t=new Date()；t . settime(行。时间)；td3。innerhtml=t . tolocaledatestring() t . tolocaletimestring()；tr。appendchild(td1)；tr。appendchild(td2)；tr。appendchild(td3)；数据表。appendchild(tr)；}//显示所有的数据函数showall data(){ db。事务(函数(tx){ tx。执行SQL( CREATE TABLE IF NOT EXISTS msg data(name TEXT，message TEXT，time INTEGER)，[])；tx。执行SQL( SELECT * FROM msg data ，[]，function(tx，RS){ remove all data()；for(var I=0；我同意。行。长度；I){ showData(RS。行。第(一)项)} })})}//添加数据函数addData(名称，消息，时间){ db。事务(函数(tx){ tx。执行SQL( INSERT INTO msg数据值(？),[姓名，消息，时间],函数{ alert(留言成功！);}，function(tx，error){ alert(error。源“:”错误。消息)；} ) })}//调用函数saveData(){ var name=document。getelementbyid( name ).价值；var memo=文档。getelementbyid(“memo”).价值；var时间=新日期()。getTime()；添加数据(姓名、备忘录、时间);showall data()；}我们有两个方法来进行软件设计：一个是让其足够的简单以至于让病菌无法藏身；另一个就是让其足够的复杂，让人找不到臭虫。前者更难一些。
总结
以上所述是小编给大家介绍的HTML5操作WebSQL数据库的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。