Web SQL database is a new feature of HTML5, which provides basic relational database functionality, using ' SQL ' to manipulate client database APIs, which are asynchronous, and the dialects used in the specification are Sqllite
The main core API has 3
- OpenDatabase: This method uses an existing database or creates a new database to create a database object
Database OpenDatabase ( in
in domstring version, indomstring displayName,
inlong estimatedsize, inoptional databasecallback Creationcallback);
Name: Database name.
Version: Database versions.
DisplayName: Display name.
EstimatedSize: The estimated length of the database, in bytes.
Creationcallback: callback function. (not required)
2. Transaction: This method allows us to control the transaction commit or rollback according to the situation
void Transaction ( in Sqltransactioncallback callback, in Optional Sqltransactionerrorcallback Errorcallback, inoptional sqlvoidcallback successcallback);
Callback: A transaction callback function in which SQL statements can be executed.
Errorcallback: Error callback function. (not required)
Successcallback: Executes the successful callback function. (not required)
3. ExecuteSQL: This method is used to execute SQL queries
void ExecuteSQL ( in domstring sqlstatement, in Optional Objectarray Arguments, in Optional Sqlstatementcallback callback, inoptional Sqlstatementerrorcallback errorcallback);
The Sqlstatement:sql statement.
The ARGUMENTS:SQL statement requires a parameter (?) Array. (not required)
Callback: Callback function. (not required)
Errorcallback: Error callback function. (not required)
Full chestnut
<!doctype html>vardb =Createdb (); functionCreatedb () {returnOpenDatabase (' TextDB ', ' 1.0 ', ' Text DB ', 2 * 1024); } functioncreatetable () {db.transaction (function(TX) {Tx.executesql (' CREATE TABLE IF not EXISTS texttable (id unique, text) '); }); } functionInsetdata (ID) {db.transaction (function(TX) {Tx.executesql (' INSERT into texttable (ID, text) VALUES (' +id+ ', "Content ' +id+ '") '); }); } functionSave () { for(vari = 0; I < 10; i++) {insetdata (i); } } functiondel (ID) {db.transaction (function(TX) {if(ID) {Tx.executesql (' DELETE from texttable WHERE id =? ‘, [id]); }Else{tx.executesql (' DELETE from Texttable '); } }); } functionQuerydata () {vartbody = document.getElementById (' DataTable '). getElementsByTagName (' tbody ') [0]; Empty (Tbody,' TR '); Db.transaction (function(TX) {Tx.executesql (' SELECT * from texttable ', [],function(context, results) {//Console.dir (results); varrows = results.rows, Len =rows.length, I, tr,id,text; for(i = 0; i < Len; i++){ //Console.dir (Rows.item (i));id = document.createelement (' TD '); Id.innerhtml=Rows.item (i). ID; Text= document.createelement (' TD '); Text.innerhtml=Rows.item (i). text; TR= Document.createelement (' tr '); Tr.appendchild (ID); Tr.appendchild (text); Tbody.appendchild (TR); } //Freeing MemoryTR =NULL, id =NULL, Text =NULL, tbody =NULL; }); }); } functionempty (parent, childrenname) {varChildrendom =Parent.getelementsbytagname (childrenname); varo = childrendom[0]; while(O! =NULL) {console.log (o) parent.removechild (o); o= Childrendom[0]; } } </script></body>Students who use chrome can press F12
Chrome is really powerful. Lists storage, cookies, app cache, Web SQL, index DB, and more.