According to the example of a pioneer in HTML5 in China, I copied an example of using HTML5 APIs to operate a local SQLite database. I feel that this function is quite interesting, but it is not powerful enough. In particular, the browser is not powerful enough:
HTML code:
1. <! DOCTYPE html>
2. 3. <meta charset = "UTF-8">
4. <title> use the HTML5 local database DEMO </title>
5. <script type = "text/javascript" src = "js/operateDB. js"> </script>
6. 7.
8. <body onload = "init ();">
9. 10. <table>
11. <tr> <td> name: </td> <input type = "text" id = "name"> </td> </tr>
12. <tr> <td> materials: </td> <input type = "text" id = "info"> </td> </tr>
13. <tr>
14. <td> </td>
15. <td> <input type = "button" value = "save" onclick = "saveData ();"> </td>
16. </tr>
17. </table>
18. 19. <table id = "datatable" border = "1"> </table>
20. <p id = "msg"> </p>
21. </body>
Javascript encapsulates many methods, such as saving data to the database, updating, and synchronizing the list below.
1 ./*
2. * This file is confidential by Charles. Wang Copyright belongs to Charles. wang
3. * You can make contact with Charles. Wang (charles_wang888@126.com)
4 .*/
5.
6. // This is the table element below.
7. var datatable = null;
8.
9. // create a database object
10. // The four parameters are the database name, version number, database description, and database size.
11. var db = openDatabase ('mydata', '', 'My database', 102400 );
12.
13. // init () method, used to reference table elements at the bottom of the page and display all database records
14. function init (){
15. // obtain the table element below and assign it to the global variable
16. datatable = document. getElementById ("datatable ");
17.
18. // display all records that have been stored in the database
19. showAllData ();
20 .}
21.
22. // removeAllData () method, used to remove the currently displayed data from all tables (it does not remove database records)
23. function removeAllData (){
24. // first, it clears all the child elements under <table>
25. // so, here it traverses the datatable component
26. for (var I = able. childNodes. length-1; I> = 0; I --){
27. datatable. removeChild (datatable. childNodes (I ));
28 .}
29.
30. // after all are removed, you need to display the header section. <tr> there are multiple <th>
31. // create a header row in the Document Tree
32. var tr = document. createElement ('tr ');
33. // The first header of the header row
34. var th1 = document. createElement ('th ');
35. // The second header of the header row
36. var 2nd = document. createElement ('th ');
37. // The third header of the header row
38. var th3 = document. createElement ('th ');
39. // set the text of the three Headers
40. th1.innerHTML = "name ";
41. th2.innerHTML = "";
42. th3.innerHTML = "time ";
43. // place the headers in sequence in the header row
44. tr. appendChild (th1 );
45. tr. appendChild (Th1 );
46. tr. appendChild (th3 );
47. // mount the newly created header row to the table
48. datatable. appendChild (tr );
49 .}
50.
51. // construct the HTML text corresponding to the data of the specified database row. Input parameter: a row of records in the database result set
52. function showData (row ){
53. // construct a table row to obtain the current information
54. var tr = document. createElement ('tr ');
55. // create the first column, which is the name
56. var td1 = document. createElement ('td ');
57. // enter the name of the row in the first column
58. td1.innerHTML = row. name;
59. // create the second column, which is a message
60. var td2 = document. createElement ('td ');
61. // fill in the information in the first column as the message of the row
62. td2.innerHTML = row.info;
63. // create the third column, which is the date
64. var td3 = document. createElement ('td ');
65. // create a date object
66. var t = new Date ();
67. t. setTime (row. time );
68. // set the standard form of the date and the International Date form to the current column respectively
69. td3.innerHTML = t. toLocaleString () + "" + t. toLocaleTimeString ();
70. // mount these three columns to the current row
71. tr. appendChild (td1 );
72. tr. appendChild (td2 );
73. tr. appendChild (td3 );
74. // Add this row to the table
75. datatable. appendChild (tr );
76 .}
77.
78. // This function is used to show all rows to the table. These rows are taken out of the database.
79. function showAllData (){
80. // enable SQLite database transactions. It uses a callback function as a parameter to indicate the statements to be executed.
81. db. transaction (function (tx ){
82. // first, it creates a database table with three fields
83. tx.exe cuteSql ('create table if not exists InfoData (name TEXT, info TEXT, time INTEGER) ', []);
84. // create a query statement to query all records in the database table (this is because all queries do not require precompiled statements and parameters (the second parameter ))
85. // then a callback function is defined to indicate the processing of the result set.
86. tx.exe cuteSql ('select * FROM infodata', [], function (tx, rs ){
87.
88. // For the result set, first, remove all data of <table> On the page before obtaining it
89. removeAllData ();
90. // traverse the result set. For each row, showData is called in sequence to create the html text for the table
91. for (var I = 0; I <rs. rows. length; I ++ ){
92. // for item (I), that is, a row of records, we display its content to the table on the page (construct the corresponding HTML segment)
93. showData (rs. rows. item (I ));
94 .}
95 .});
96 .}
97.
98 .);
99 .}
100.
101. // This function is used to add a record to the database. Some of the information is obtained from the page, and some are generated by the system.
102. function addData (name, info, time ){
103. // start a Database Transaction
104. // The callback function is an insert statement with parameters. We can see that we are inserted into the InfoData table. The inserted content is the content transmitted by parameters.
105. db. transaction (function (tx ){
106.
107. // The insert statement is a template statement.
108. // The callback for successful insertion is to enter a log line on the console.
109. tx.exe cuteSql ('insert INTO InfoData VALUES (?,?,?) ', [Name, info, time], function (tx, rs ){
110. console. log ("data is saved successfully! ");
111 .},
112. // The callback for insertion failure is to enter an error log in the console.
113. function (tx, error ){
114. console. log (error. source + ":" + error. message );
115 .});
116 .}
117.
118 .);
119 .}
120.
121. // Save the current user input. This is the event handler function for clicking the "save" button on the page.
122. function saveData (){
123. // obtain the text of two input boxes from the HTML page
124. var name = document. getElementById ('name'). value;
125. var info = document. getElementById ('info'). value;
126. // obtain the current system time www.2cto.com
127. var time = new Date (). getTime ();
128. // Save the user name, user information, and current time to the database
129. addData (name, info, time );
130. // update the <p id = "msg"> table below
131. showAllData ();
132 .}
I did a test on Google Chrome. The following is:
Chrome I use the latest version, assuming that I have installedC: \ Documents ents and Settings \ charles. wang \ Local Settings \ Application Data \ Google \ Chrome
Then the SQLite database is installed$ CHROME_HOME \ User Data \ Default \ databasesMedium
In this directoryDatabases. dbIs the configuration of all the databases created by the current user, andFile _ 0The directory is the database table file directory:
You can use the SQLite management tool to open these two files:
Configure the Databases used in Databases. db:
This is the same as the setting in js:
When we open the database file, we can see that:
The records in these databases are displayed on the page.
Limitations:
Unfortunately, I tested the Firefox browser (Version 12) that programmers like most. Unfortunately, it does not support this local database SQLite (I opened the Firebug console ):
I hope this problem can be improved in the future. After all, there are still many people using Firefox, especially programmers.
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
