HTML5-Wed SQL local database example, html5wed
1 <! DOCTYPE html>
2 3 4 <meta charset = "UTF-8">
5 <title> Title </title>
6 <script src = "SQL. js"> </script>
7 8 <! -- Open the webpage and call the init () function to display the stored data -->
9 <body onload = "init ()">
10 <table>
11 <tr> <td> name: </td> <input type = "text" id = "name"> </td> </tr>
12 <tr> <td> message: </td> <input type = "text" id = "memo"> </td> </tr>
13 <tr>
14 <td> </td>
15 <! -- Event trigger -->
16 <td> <input type = "button" value = "save" onclick = "saveData ()"> </td>
17 </tr>
18 </table>
19 20 <table id = "datatable" border = "1">
21 <p id = "msg"> </p>
22 </table>
23 </body>
34SQL. js
1 // 1. Create the Database Access Object 2 // 2. Use transaction processing 3 var datatbale = null; 4 var db = openDatabase ("Mydata ","", "My Database", 1024*100); 5/* 6 openDatabase (), used to open data. If the Database does not exist, a new Database is created. Seven Five parameter descriptions: Database Name, version number, description text, database size, creation callback 8 */9 function init () {10 datatbale = document. getElementById ("datatable"); 11 showAllData (); 12} 13 // clear the data, retain the header 14 function removeAllData () {15 for (var I = datatbale. childNodes. length-1; I> = 0; I --) {16 datatbale. removeChild (datatbale. childNodes [I]); 17} 18 var tr = document. createElement ("tr"); 19 var th1 = document. createElement ("th"); 20 var Th1 = document. createEle Ment ("th"); 21 var th3 = document. createElement ("th"); 22 th1.innerHTML = "name"; 23 th2.innerHTML = "message"; 24 th3.innerHTML = "time"; 25 tr. appendChild (th1); 26 tr. appendChild (2nd); 27 tr. appendChild (th3); 28 datatbale. appendChild (tr); 29} 30 // display data 31 function showData (row) {32 var tr = document. createElement ("tr"); 33 var td1 = document. createElement ("td"); 34 td1.innerHTML = row. name; 35 var td2 = document. crea TeElement ("td"); 36 td2.innerHTML = row. message; 37 var td3 = document. createElement ("td"); 38 var t = new Date (); 39 t. setTime (row. time); 40 td3.innerHTML = t. toLocaleDateString () + "" + t. toLocaleTimeString (); 41 tr. appendChild (td1); 42 tr. appendChild (td2); 43 tr. appendChild (td3); 44 datatbale. appendChild (tr); 45} 46 // event processing. Clear the data first and then call the showData () function in a for loop to display all data. 47 function showAllData () {48 db. transaction (functi On (tx) {49 tx.exe cuteSql ("create table if not exists MsgData (name TEXT, message TEXT, time INTEGER)", []); 50 tx.exe cuteSql ("SELECT * FROM MsgData", [], function (tx, rs) {51 removeAllData (); 52 for (var I = 0; I <rs. rows. length; I ++) {53 showData (rs. rows. item (I); 54} 55}) 56} 57} 58 // how can I be called? 59 function addData (name, message, time) {60/* 61 transaction () function for processing transactions: 62 method containing transaction content 63 successful execution callback function (optional) 64 execution failure callback function (optional) 65 */66 db. transaction (function (tx) {67/* 68 executeSql () function is used to execute SQL statements and return results, there are four parameters: 69. 1. query string 70. 2. Replace the question mark in query string 71. 3. Execution success callback (optional) 72. 4. Execution failure callback (optional) 73 */74 tx.exe cuteSql ("insert into MsgData VALUES (?,?,?) ", [Name, message, time], function (tx, rs) {75 alert (" successful "); 76}, 77 function (tx, erro) {78 alert (erro. source + ":" + erro. message); 79} 80) 81}) 82} 83 // Save the data and call the showAllData () function to display all the data. function 84 saveData () {85 var name = document. getElementById ("name "). value; 86 var memo = document. getElementById ("memo "). value; 87 var time = new Date (). getTime (); 88 addData (name, memo, time); 89 showAllData (); 90}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
