如何用HTML5操作WebSQL数据库

　　HTML代码：

　　<!DOCTYPEhtml>

　　<html>

　　<headlang="en">

　　<metacharset="UTF-8">

　　<title>列车时刻表查询</title>

　　<metaname="viewport"content="width=device-width,initial-scale=1">

　　<linkrel="stylesheet"href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>

　　<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>

　　<scriptsrc="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

　　</head>

　　<scriptsrc="js/connect.js"></script>

　　<bodyonload="init()">

　　<pdata-role="page"id="pageone">

　　<pdata-role="header"data-position="fixed">

　　<h1>列车时刻表查询</h1>

　　</p>

　　<pdata-role="main"class="ui-content">

　　<palign="center">请给我留言</p>

　　<tabledata-role="table"class="ui-responsive">

　　<thead>

　　<tr>

　　</tr>

　　</thead>

　　<tbody>

　　<tr>

　　</tr>

　　</tbody>

　　</table>

　　<buttontype="submit"onclick="saveData()">留言</button>

　　<tabledata-role="table"data-mode=""class="ui-responsive"id="datatable">

　　</table>

　　</p>

<!--

　　作者：ceet@vip.qq.com

　　时间：2017-08-26

　　描述：底部TAB

　　-->

　　<pdata-role="footer"data-position="fixed">

　　<pdata-role="navbar">

　　<ul>

　　<li>

　　<ahref="index.html#index"data-icon="grid"class="ui-btn-active">查询</a>

　　</li>

　　<li>

　　<ahref="index.html#detail"data-rel="popup"data-icon="star">收藏</a>

　　</li>

　　<li>

　　<ahref="test.html"data-icon="comment">给我留言</a>

　　</li>

　　</ul>

　　</p>

　　<pdata-role="popup"id="myPopup"class="ui-content"data-theme="b">

　　<ahref="#"data-rel="back"class="ui-btnui-btn-aui-corner-allui-shadowui-btnui-icon-deleteui-btn-icon-notextui-btn-right">Close</a>

　　<p>收藏成功，暂且不做处理!.</p>

　　<p>请点击右上角有个关闭按钮</p>

　　<p><b>提示：</b>你也可以点击弹窗的外部区域来关闭弹窗。</p>

　　</p>

　　</body>

　　</html>

　　JS代码：

　　/**

　　*HTML5操作本地WebSQL数据库

　　*作者：汪政

　　*时间：2017/08/2615：03：19

　　vardatatable=null;

　　vardb=openDatabase("MyData","","MyDatabase",1024*100);

　　//初始化函数方法

　　functioninit(){

　　datatable=document.getElementById("datatable");

　　showAllData();

　　}

　　//首先移除乱七八糟的东西

　　functionremoveAllData(){

　　for(vari=datatable.childNodes.length-1;i>=0;i--){

　　datatable.removeChild(datatable.childNodes[i]);

　　}

　　vartr=document.createElement("tr");

　　varth1=document.createElement("th");

　　varth2=document.createElement("th");

　　varth3=document.createElement("th");

　　th1.innerHTML="姓名";

　　th2.innerHTML="留言";

　　th3.innerHTML="时间";

　　tr.appendChild(th1);

　　tr.appendChild(th2);

　　tr.appendChild(th3);

　　datatable.appendChild(tr);

　　}

　　//显示WebSQL中的数据

　　functionshowData(row){

　　vartr=document.createElement("tr");

　　vartd1=document.createElement("td");

　　td1.innerHTML=row.name;

　　vartd2=document.createElement("td");

　　td2.innerHTML=row.message;

　　vartd3=document.createElement("td");

　　vart=newDate();

　　t.setTime(row.time);

　　td3.innerHTML=t.toLocaleDateString()+""+t.toLocaleTimeString();

　　tr.appendChild(td1);

　　tr.appendChild(td2);

　　tr.appendChild(td3);

　　datatable.appendChild(tr);

　　}

　　//显示所有的数据

　　functionshowAllData(){

　　db.transaction(function(tx){

　　tx.executeSql("CREATETABLEIFNOTEXISTSMsgData(nameTEXT,messageTEXT,timeINTEGER)",[]);

　　tx.executeSql("SELECT*FROMMsgData",[],function(tx,rs){

　　removeAllData();

　　for(vari=0;i<rs.rows.length;i++){

　　showData(rs.rows.item(i))

　　}

　　})

　　}

　　//添加数据

　　functionaddData(name,message,time){

　　db.transaction(function(tx){

　　tx.executeSql("INSERTINTOMsgDataVALUES(?,?,?)",[name,message,time],function(tx,rs){

　　alert("留言成功！");

　　function(tx,error){

　　alert(error.source+"::"+error.message);

　　}

　　)

　　})

　　}

　　//调用

　　functionsaveData(){

　　varname=document.getElementById("name").value;

　　varmemo=document.getElementById("memo").value;

　　vartime=newDate().getTime();

　　addData(name,memo,time);

　　showAllData();

　　}

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

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h54965.shtml