Example of using Web SQL in HTML 5

Example of using Web SQL in HTML 5

Web SQL simulates databases in a browser and can use JS to operate SQL to read and write data. However, this feature currently does not support many browsers, and its W3C specification has been discontinued, it seems that its prospects are not very clear.

W3C specification: http://www.w3.org/TR/webdatabase/#dom-sqltransaction-sync-executesql)

Supported browsers and versions:

Safari (3.2 +)
Chrome (3.0 +)
Opera (10.5 +)

Generally, offline applications use webstorage, but webstorage has many limitations, such as storage space and domain security mechanisms. web SQL has no restrictions, it has a larger storage space (customizable), cross-origin read/write, free storage structure, and other features. It is also very convenient to use SQL for read/write.

Sample Code

 Use databases to implement web message boards<Script language = "JavaScript"> var datatable = null; // use the openDatabase method to create a database access object var db = openDatabase ('mydata ','', 'My database', 102400); // initialization operation function init () {datatable = document. getElementById ("datatable"); showAllData () ;}// delete all data function removeAllData () {for (var I = datatable. childNodes. length-1; I> = 0; I --) {datatable. removeChild (datatable. childNodes [I]);} var tr = document. creat EElement ('tr '); var th1 = document. createElement ('th'); var Th1 = document. createElement ('th'); var th3 = document. createElement ('th'); th1.innerHTML = 'name'; th2.innerHTML = 'login'; th3.innerHTML = 'time'; tr. appendChild (th1); tr. appendChild (2nd); tr. appendChild (th3); datatable. appendChild (tr);} // 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) {Tx.exe cuteSql ('create table if not exists MsgData (name TEXT, message TEXT, time INTEGER) ', []); tx.exe cuteSql ('select * FROM MsgData ', [], function (tx, rs) {removeAllData (); for (var I = 0; I <rs. rows. length; I ++) {showData (rs. rows. item (I) ;}};}) ;}// added the data function addData (name, message, time) {db. transaction (function (tx) {tx.exe cuteSql ('insert INTO MsgData VALUES (?, ?, ?) ', [Name, message, time], function (tx, rs) {// document. getElementById ("msg"). innerHTML = "data is saved successfully! ";}, Function (tx, error) {alert (error. source + ":" + error. message) ;}) ;};}// save data function saveData () {var name = document. getElementById ('name '). value; var memo = document. getElementById ('memo '). value; var time = new Date (). getTime (); addData (name, memo, time); showAllData () ;}// DELETE the table data function deletedata(deletedb.transaction(function(tx0000tx.exe cuteSql ("delete from MsgData", [], function (tx, rs) {// Alert ("data deleted successfully! ") ;}, Function (tx, error) {alert (error. source + ":" + error. message) ;}); showAllData () ;}</script>Use databases to implement web message boards
 
 

  
  
 
   
 
    
Name:
 
    
 
 
   
 
   
 
    
Message:
 
    
 
 
   
 
   
 
    
 
 
    
 
 
   
 
   
 
    
 
   
 
  
 
 
 
 
 

For websql, due to the broad read/write rules, it brings about a lot of security issues. Cross-origin reading, XSS attacks, SQL injection, and so on are all very headaches. Therefore, consider carefully what data can be stored and how it is stored. W3C has stopped the update of this specification and may not be satisfied with the current specification design. Currently, browser vendors do not have a high level of support. The future development is still unknown.