HTML5 - Web SQL Database

What is the Web SQL Database

Actually, The Web SQL Database API is not part of the released HTML5 specification, it is a specification that is on its own, it comes with a set of APIs that is meant for manipulating client-side databases with the use of SQL

Web SQL Database is available on the latest version of Chrome, Opera and Safari.

The Core Methods

The following are the three core methods that were defined in the specification.

• open database: This core method generates the database object either by using an existing database or bootstrapping a new one.

• transaction: This core method only gives us the ability to control a transaction and performing either commit or rollback based on the situation.

• execute SQL: This core method is meant for executing the main SQL query.

Opening Database

The open database builtin function takes care of opening a database if it already exists, this method will create it if it already does not exist.

To generate and launch a database, you can use the following code:

The method above takes the following parameters:

• Database name
• Version number
• Text description
• Size of database
• Creation callback

In the 5th and last arguments, the creation callback function will be initiated when the database is being created. Without this particular feature, the databases will still be created and correctly versioned.

Executing Queries

In other to execute a database query you need to use the database.transaction() method. This method needs just one argument, which is a callback function that helps to actually execute the query, an example below demonstrates how executing queries is done:

INSERT Operation 

in other to generate entries into the database table we simply an SQL query in the above example:

in the code above e_id and e_log are all external variables and they execute SQL maps on each item in the array argument to the "?"s.

READ Operation

To read records that are already existing we can use a callback to get the results like below;

Final Example 

So finally, let us keep this example in a full-fledged HTML5 document as follows and try to run it with the Safari browser.