HTML5 Local Database (WEBSQL) [Go]

In addition to Sessionstorage and Localstorage, HTML5 also supports local data storage via a local database, and HTML5 uses the "SQLite" file-based database, which is more concentrated on embedded devices and is familiar with ios/ Android development students, should be familiar with SQLite database.

Websql allows us to create a local database directly on the browser side of the JS API, and supports standard SQL CRUD operations, making it easier for offline Web applications to store structured data. Next, we introduce the relevant APIs and usage of local data.

The most basic steps for manipulating the local database are:

• First step: OpenDatabase method: Create an object that accesses the database.
• Step two: Use the database Access object created in the first step to execute the transaction method, which allows you to set up an event response method that turns on a successful transaction and can execute SQL in the event response method.
• The third step: Execute the query through the ExecuteSQL method, of course, the query can be: CRUD.

Next, we introduce the parameters and usage of the relevant methods.

(1) OpenDatabase method:

// Demo: Gets or creates a database that is created if the database does not exist var function () { });

The OpenDatabase method opens a database that already exists, and if the database does not exist, it can also create a database. Several parameter meanings are:

• 1, database name.
• 2, the database version number, at present to pass a 1.0 on it, of course, can not fill;
• 3, the description of the database.
• 4, set the size of the allocated database (in kilobytes).
• 5, the callback function (can be omitted). The database is created at the first call, and then the connection is established.

(2) The Db.transaction method can set a callback function that can accept a parameter that is the object of the transaction that we opened. This object can then be used to execute SQL scripts, which can be combined with the following steps.

(3) Execute the query through the ExecuteSQL method.

Ts.executesql (Sqlquery,[value1,value2..],datahandler,errorhandler)

Parameter description:

• Qlquery: The SQL statement that needs to be executed, can be create, select, Update, delete;
• Value1,value2..] : An array of all the parameters used in the SQL statement, in the ExecuteSQL method, use the arguments in the s> statement first with "?" Instead, and then put the arguments into the second argument in turn
• Atahandler: Execution success is called the callback function, through which the query result set can be obtained;
• 4,errorhandler: callback function to invoke when execution fails;

The contents of the data stored in Websql can be viewed in a browser: The following is a comprehensive example, you can look at:

<! DOCTYPE html>functioninitdatabase () {vardb = Getcurrentdb ();//Initializing the database            if(!db) {Alert ("Your browser does not support HTML5 local database");return; } db.transaction (function(trans) {//start a transaction and set the callback function                //Execute SQL script to create TABLETrans.executesql ("CREATE table if not exists Demo (uName text null,title text null,words text null)", [],                     function(trans, result) {},function(trans, message) {//callback functions for messagesalert (message);            });        }); }                        $(function() {alert (111);            Initdatabase (); $("#btnSave"). Click (function () {                varTxtname = $ ("#txtName"). Val (); varTxttitle = $ ("#txtTitle"). Val (); varTxtwords = $ ("#txtWords"). Val (); vardb =Getcurrentdb (); //Execute SQL script, insert dataDb.transaction (function(trans) {Trans.executesql (Insert into Demo (uname,title,words) VALUES (?,?,?), [Txtname, Txttitle, Txtwords],function(TS, data) {},function(TS, message) {alert (message);                });                });            Showallthedata ();        });        }); functionGetcurrentdb () {//open a database or connect directly to a database parameter: database name, version, overview, size            //If the database does not exist then create the            vardb = OpenDatabase ("MyDb", "1.0", "It s to save demo data!", 1024 * 1024); ; returnDB; }        //Show data from all databases to page up        functionShowallthedata () {$ ("#tblData"). empty (); vardb =Getcurrentdb (); Db.transaction (function(trans) {Trans.executesql ("SELECT * from Demo", [],function(TS, data) {if(data) { for(vari = 0; i < data.rows.length; i++) {appenddatatotable (Data.rows.item (i));//gets the JSON object for a row of data                        }                    }                }, function(TS, message) {alert (message);varTST =message;});        }); }        functionAppenddatatotable (data) {//show the data in the table            //Uname,title,words            varTxtname =Data.uname; varTxttitle =Data.title; varWords =data.words; varstrHTML = ""; strHTML+ = "<tr>"; strHTML+ = "<td>" +txtname+ "</td>"; strHTML+ = "<td>" + txttitle + "</td>"; strHTML+ = "<td>" + words + "</td>"; strHTML+ = "</tr>"; $("#tblData"). Append (strhtml); }    </script>
HTML5 Local Database (WEBSQL) [Go]