Shulou(Shulou.com)06/01 Report--

This article is about whether the local database is a new feature of html5. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Local databases are a new feature of html5. Html5 provides a browser-side database support that allows developers to create a local database on the browser side directly through JS's API, and supports standard SQL CRUD operations, making offline Web applications more convenient to store structured data.

The operating environment of this tutorial: windows7 system, HTML5 version, Dell G3 computer.

Although Html5 has provided powerful localStorage and sessionStorage, both of them can only provide data for storing simple data structures, but there is nothing they can do for complex Web applications. Unfortunately, Html5 provides a browser-side database support, which allows us to directly communicate with JS's API to create a local database on the browser side, and supports standard SQL CRUD operations, making offline Web applications more convenient to store structured data. Next, I will introduce the relevant API and usage of local data.

The most basic steps to operate a local database are:

Step 1: openDatabase method: create an object that accesses the database.

Step 2: use the database access object created in the first step to execute the transaction method, through which you can set an event response method that opens the transaction successfully, and SQL can be executed in the event response method.

Step 3: execute the query through the executeSql method, of course the query can be: CRUD.

Next, we will introduce the parameters and usage of the related methods.

(1) openDatabase method:

/ / Demo: get or create a database. If the database does not exist, then the created var dataBase = openDatabase ("student", "1.0", "student table", 1024 * 1024, function () {})

The openDatabase method opens an existing database, and it can also create a database if it does not exist. The meanings of several parameters are:

1, database name.

2. For the version number of the database, it is OK to pass it as 1.0 at present. Of course, it can be left unfilled.

3. Description of the database.

4. Set the size of the allocated database in kb.

5, callback function (can be omitted).

The database is created the first time the call is made, and then the connection is established.

(2) the db.transaction method can set a callback function that accepts an argument that is the object of the transaction we opened. The Sql script can then be executed through this object, 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 to be executed, which can be create, select, update, delete

Value1,value2..]: an array of all the parameters used in the sql statement. In the executeSql method, use "?" for the parameters to be used in the s > statement. Instead, and then put these parameters into an array in turn in the second parameter

AtaHandler: successful execution is the callback function called, through which the query result set can be obtained.

4errorHandler: callback function called when execution fails

Here is a comprehensive example, which you can take a look at:

Function initDatabase () {var db = getCurrentDb (); / / initialize the database if (! db) {alert ("your browser does not support HTML5 local databases"); return } db.transaction (function (trans) {/ / starts a transaction and sets the callback function / / to execute the Sql script that creates the table trans.executeSql ("create table if not exists Demo (uName text null,title text null,words text null)", [], function (trans, result) {}, function (trans, message) {/ / callback function alert (message) of message });}, function (trans, result) {}, function (trans, message) {});} $(function () {/ / the click event of binding the page button after the page is loaded initDatabase () ("# btnSave") .click (function () {var txtName = $("# txtName") .val (); var txtTitle = $("# txtTitle") .val (); var txtWords = $("# txtWords") .val (); var db = getCurrentDb () / execute sql script, insert data db.transaction (function (trans) {trans.executeSql ("insert into Demo (uName,title,words) values)", [txtName, txtTitle, txtWords], function (ts, data) {}, function (ts, message) {alert (message) );}); showAllTheData ();});}) Function getCurrentDb () {/ / Open the database, or directly connect to the database parameters: database name, version, overview, size / / var db = openDatabase created if the database does not exist ("myDb", "1.0", "it's to save demo data!", 1024 * 1024); return db } / / display all the data in the database to the page to function showAllTheData () {$("# tblData") .empty (); var db = getCurrentDb () Db.transaction (function (trans) {trans.executeSql ("select * from Demo", [], function (ts, data) {if (data) {for (var I = 0; I < data.rows.length; iTunes +) {appendDataToTable (data.rows.item (I)) / / get the json object of a row of data}, function (ts, message) {alert (message); var tst = message;});});} function appendDataToTable (data) {/ / display the data in the table / / uName,title,words var txtName = data.uName Var txtTitle = data.title; var words = data.words; var strHtml = ""; strHtml + = ""; strHtml + = "" + txtName+ ""; strHtml + = "" + txtTitle + ""; strHtml + = "" + words + ""; strHtml + = ""; $("# tblData") .append (strHtml) } user name: title: message:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.