In HTML5, direct access to the built-in database can be as easy as accessing a local file.
There are two types of databases built into HTML5, one for Sqllite and the other for INDEXEDDB.
1. Create an object that accesses the database
var db = openDatabase("myDB","1.0","test db",1024*100);
Description
1. The method returns the object that created the database and creates the database if it does not exist.
2. First parameter: Name of the database
Second parameter: The version number of the database
Third parameter: A description of the database
Fourth parameter: size of the database
2. Using Transaction processing
db.transaction(function(tx){ tx.executeSql(""); })
Description
1. Reasons for using transactions: You can prevent access to the database, and perform operations that are outside of interference. There may be many people accessing the Web page at the same time, and if the database is being accessed by other users during the database access process, it can cause many unexpected results, so the transaction is used to prevent other users from accessing the database until the operation is completed.
2.function (TX): is a callback function
3.tx.executesql (): This method is used to execute the SQL statement.
Transaction.executesql (Sqlquery,[],datahandler,errorhandler)
First parameter: SQL statement that is a database operation
Second parameter: An array of parameters used in the SQL statement
The third parameter: The callback function that is called after a successful SQL statement is executed.
function DataHandler (transaction,results)
Fourth parameter: When executing an SQL statement, if an error is called by the callback function,
Function ErrorHandler (transaction,errmsg)
HTML code:
<! DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="Html5testjs.js"></script></head><body onload="init ()"> <table> <tr> <TD>Name:</td> <TD><input type="text" id="name"></td> </tr> <tr> <TD>Message:</td> <TD><input type="text" id="Memo"></td> </tr> <tr> <TD><input type="button" value="Save" onclick=" SaveData () "></td> <TD><input type="button" value="Delete a table" onclick ="droptable ()"></td> </tr> </table><hr><table Border="1" id="DataTable"></table> <p id="msg"></P></body></html>JS file:
/** * Created by Administrator on 2016/5/6 0006. * *varDataTable =NULL;vardb = OpenDatabase ("MyData","","My Database",1024x768* -); function init(){DataTable = document.getElementById ("DataTable"); ShowAllData ();}//Delete all child nodes under table in HTML function removealldata(){ for(vari=datatable.childnodes.length-1; i>=0; i--) {datatable.removechild (datatable.childnodes[i]); }varTR = document.createelement ("TR");varTh1 = Document.createelement ("TH");varTh2 = Document.createelement ("TH");varTh3 = Document.createelement ("TH"); th1.innerhtml ="Name"; th2.innerhtml ="Message"; th3.innerhtml ="Time"; Tr.appendchild (Th1); Tr.appendchild (Th2); Tr.appendchild (TH3); Datatable.appendchild (tr);}//Display data information content function showData(Row){ varTR = document.createelement ("TR");varTD1 = Document.createelement ("TD");varTD2 = Document.createelement ("TD");varTD3 = Document.createelement ("TD"); td1.innerhtml = Row.name; td2.innerhtml = Row.message;vart =New Date(); T.settime (Row.time); td3.innerhtml = t.tolocaledatestring () +" "+ t.tolocaletimestring (); Tr.appendchild (TD1); Tr.appendchild (TD2); Tr.appendchild (TD3); Datatable.appendchild (tr);}//Displays all data information in the current local database function showalldata(){Db.transaction ( function(TX){Tx.executesql ("CREATE table if not exists msgdata (name text,message text,time integer)",[]); Tx.executesql ("SELECT * from Msgdata",[], function(tx,rs){Removealldata (); for(varI=0; i<rs.rows.length;i++) {ShowData (Rs.rows.item (i)); } }); })}//Add data to the local database function addData(name,message,time){Db.transaction ( function(TX){Tx.executesql ("INSERT into msgdata values (?,?,?)", [Name,message,time], function(tx,rs){Window.alert ("Insert success!" "); }, function(tx,error){Window.alert (error.source+"::"+error.message); }); })}//Save the data submitted in table function saveData(){ varName = document.getElementById ("Name"). Value;varMemo = document.getElementById ("Memo"). Value;varTime =New Date(). GetTime (); AddData (Name,memo,time); ShowAllData ();}//Delete a table function droptable(){ varTableName = Window.prompt ("Please enter the name of the table you want to delete:",""); Db.transaction ( function(TX){Tx.executesql ("DROP table"+tablename+"",[], function(tx,rs){Window.alert ("Table deleted successfully! "); }, function(tx,error){Window.alert (error.source+"::"+error.message); }); })}Effect Demo:
The data information in the database tables in the developer tool:
Base of local Database (Sqllite) in HTML5
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
