<! docType html> <html> <head lang = en> <메타 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> </ 스크립트> </head> <스크립트 src = js/connect.js> </script> <body onload = init ()> <div data-lole = page id = pageone> <div data-lole = 헤더 data-position = 고정> <h1> h </h1> </div> <div data-lole = main class = ui-content> <p align = center> </p> <table data-lole = 테이블 클래스 = ui-responsive> <thead> <tr> <th> 姓名 ： </th> <th> 留言 ： </th> </tr> </thead> <tbody> <tr> <td> <입력 type = text id = name> </td> <td> <입력 유형 = 텍스트 ID = 메모> </td> </tbody> </table> <버튼 유형 = onclick = savedata ()>留言 </button> <테이블 data-lole = 테이블 데이터 모드 = class = ui-responsive id = dataTable> <!-这里是留言板的显示区域-> </table> </div> <!- -@： [email protected] 时间 ： 2017-08-26 描述 ： 底部 탭-> <div data-lole = 바닥다 데이터-위치 = 고정> <div data-lole = navbar> <ul> <li > <a href = index.html#index data-icon = grid class = ui-btn-active> </a> </a> </li> <li> <a href = index.html#detail rel = 팝업 데이터 -Icon = star> </a> </a> </li> <li> <a href = test.html data-icon = comment> </a> </a> </a> </a> /div> <!-<-> <div data-lole = popup id = myPopup class = ui-content data-teme = 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> 收藏成功 收藏成功, 暂且不做处理!. < * div> </div> </body> </html>JS 代码 ：
/** * html5 操作本地 webql 数据库 * 作者 ： 汪政 * 时间 ： 2017/08/26 15 ：03 ：19 */var datatable = null; var db = opendatabase (mydata ,, my database, 1024 * 100); // 初始化函数方法 function init () {dataTable = document.getElementById (DataTable); showalldata ();} // 首先移除乱七八糟的东西 함수 removealldata () {for (var i = dataTable.childnodes.length -1; i> = 0; 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 中的数据 함수 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 = 새 날짜 (); T. 세트 타임 (Row.Time); td3.innerhtml = t.tolocaledatestring () + + t.tolocaletimestring (); Tr.AppendChild (TD1); Tr.AppendChild (TD2); Tr.AppendChild (TD3); DataTable.appendChild (tr);} // 显示所有的数据 함수 showAllData () {db.transaction (function (tx) {tx.executesql (tx.executesql 만들기) msgdata (이름 텍스트, 메시지 텍스트, 시간 정수), [ ]; item (i))}}})} // 添加数据 함수 addData (이름, 메시지, 시간) {db.transaction (function (tx) {tx.executesql (msgdata 값에 삽입 (?,?)), [이름, 메시지, 시간], 함수 (tx, rs) {alert (留言成功！); // 调用 함수 savedata () {var name = document.getElementById (name) .Value; var 메모 = Document.getElementById (메모) .Value; var time = new date (). gettime (); addData (이름, 메모, 시간); showalldata ();}我们有两个方法来进行软件设计 ： 一个是让其足够的简单以至于让 버그 无法藏身；另一个就是让其足够的复杂 无法藏身；另一个就是让其足够的复杂, 让人找不到 버그 。前者更难一些。
总结Html5 操作 webql 数据库的实例代码 数据库的实例代码, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的。在此也非常感谢大家对VEVB 武林网网站的支持！