The Web SQL Database API is not actually part of the HTML5 specification, but a separate specification. It manipulates the client's database through a set of APIs. Major browsers such as Safari, Chrome, Firefox, and Opera already support Web SQL Database. HTML5's Web SQL Databases are really tempting, and it's interesting when you find that you can use the same query statements as mysql queries to manipulate local databases. Today, let's take a look at HTML 5's Web SQL Database API.
The following will introduce how to create open database, create table, add data, update data, delete data, delete table.
First introduce three core methods
1, openDatabase: This method uses an existing database or creates a new database to create a database object.
2, transaction: This method allows us to control the transaction commit or rollback according to the situation.
3. executeSql: This method is used to execute real SQL queries.
Step 1: Open the connection and create the database
var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });
if (!dataBase) {
alert("Database creation failed!");
} else {
alert("The database was created successfully!");
}
Explain that the openDatabase method opens an existing database, and if the database does not exist, it can also create the database. The meanings of several parameters are:
1. Database name.
2. The version number is currently 1.0, regardless of him, it is OK to write to death.
3, the description of the database.
4. Set the size of the data.
5. Callback function (can be omitted).
The database is created when the first call is made, and the connection is established later.
The created database exists locally, and the path is as follows:
C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\databases\http_localhost_* .
Created is a sqllite database, you can open the file with SQLiteSpy, you can see the data inside. SQLiteSpy is a green software, you can download it from Baidu or the official download of SQLiteSpy: SQLiteSpy .
Step 2: Create the data table
this.createTable=function() {
dataBase.transaction( function(tx) {
tx.executeSql(
"create table if not exists stu (id REAL UNIQUE, name TEXT)",
[],
function(tx,result){ alert('create stu table successfully'); },
function(tx, error){ alert('Failed to create stu table:' + error.message);
});
});
}
Explain, the
executeSql function has four parameters, and their meanings are:
1) A string representing the query, and the SQL language used is SQLite 3.6.19. (Required)
2) Insert the string data where the question mark is in the query. (Optional)
3) The callback function to be executed on success. Returns two parameters: tx and the result of the execution. (optional)
4) A callback function to be executed on failure. Returns two parameters: tx and the failure error message. (optional)
Step 3: Execute CRUD
1) Add data:
this.insert = function () {
dataBase.transaction(function (tx) {
tx.executeSql(
"insert into stu (id, name) values(?, ?)",
[id, 'Xu Mingxiang'],
function () { alert('Added data successfully'); },
function (tx, error) { alert('Failed to add data: ' + error.message);
} );
});
2) Query data
this.query = function () {
dataBase.transaction(function (tx) {
tx.executeSql(
"select * from stu", [],
function (tx, result) { //Callback function for successful execution
//Do what you want to the result here.......
},
function (tx, error) {
alert('Query failed: ' + error.message);
} );
});
}
Special reminder
that the successful callback function in the above code has a parameter result.
result: The queried dataset. Its data type is SQLResultSet, just like DataTable in C#.
SQLResultSet is defined as:
interface SQLResultSet {
readonly attribute long insertId;
readonly attribute long rowsAffected;
readonly attribute SQLResultSetRowList rows;
};
One of the most important properties—rows of type SQLResultSetRowList—is the "rows" of the dataset.
rows has two properties: length, item.
Therefore, get the value of the first row and column name of the query result: result.rows.item(0).name.
3) Update data
this.update = function (id, name) {
dataBase.transaction(function (tx) {
tx.executeSql(
"update stu set name = ? where id= ?",
[name, id],
function (tx, result) {
},
function (tx, error) {
alert('Update failed: ' + error.message);
});
});
}
4) Delete data
this.del = function (id) {
dataBase.transaction(function (tx) {
tx.executeSql(
"delete from stu where id= ?",
[id],
function (tx, result) {
},
function (tx, error) {
alert('Deletion failed: ' + error.message);
});
});
}
5) Delete the data table
this.dropTable = function () {
dataBase.transaction(function (tx) {
tx.executeSql('drop table stu');
});
}