H5 WebSQL database and h5websql Database

H5 WebSQL database and h5websql Database

HTML code:

<! DOCTYPE html> 
　　
JS Code:
/*** HTML5 local WebSQL database operation Author: Wang Zheng * Time: 15:03:19 */var datatable = null; var db = openDatabase ("MyData ","", "My Database", 1024*100); // initialization function Method function init () {datatable = document. getElementById ("datatable"); showAllData () ;}// first remove the messy things function removeAllData () {for (var I = datatable. childNodes. length-1; I> = 0; I --) {datatable. removeChild (datatable. childNodes [I]);} var tr = document. cr EateElement ("tr"); var th1 = document. createElement ("th"); var Th1 = document. createElement ("th"); var th3 = document. createElement ("th"); th1.innerHTML = "name"; th2.innerHTML = "message"; th3.innerHTML = "time"; tr. appendChild (th1); tr. appendChild (2nd); tr. appendChild (th3); datatable. appendChild (tr);} // display the data 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);} // display all data functions showAllData () {db. transaction (function (tx) implements tx.exe cuteS Ql ("create table if not exists MsgData (name TEXT, message TEXT, time INTEGER)", explain when using tx.exe cuteSql ("SELECT * FROM MsgData", [], function (tx, rs) {removeAllData (); for (var I = 0; I <rs. rows. length; I ++) {showData (rs. rows. item (I) }})} // Add data function addData (name, message, time) {db. transaction (function (tx) using tx.exe cuteSql ("insert into MsgData VALUES (?,?,?) ", [Name, message, time], function (tx, rs) {alert (" message successful! ") ;}, Function (tx, error) {alert (error. source + ":" + error. message) ;})} // call function saveData () {var name = document. getElementById ("name "). value; var memo = document. getElementById ("memo "). value; var time = new Date (). getTime (); addData (name, memo, time); showAllData ();}