Monaca Docs
Search…
Using Database
HTML5 Web SQL Database connects to the device database. This section describes Web SQL Database usage.

Web SQL Database

You need to create a new Database object before accessing to it. window.openDatabase function creates a new SQLite database.
1
var db = window.openDatabase(database_name, database_version, database_displayname, database_size);
Copied!

Creating a Database (SQLite)

1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta name="viewport" content="width=device-width, user-scalable=no">
5
<script type="text/javascript" charset="utf-8" src="components/loader.js"></script>
6
<script type="text/javascript" charset="utf-8">
7
document.addEventListener("deviceready", onDeviceReady, false);
8
function onDeviceReady() {
9
var db = window.openDatabase("database", "1.0", "testdatabase", 1000000);
10
}
11
</script>
12
</head>
13
<body>
14
<pre>Web SQL Database</pre>
15
</body>
16
</html>
Copied!

openDatabase Arguments

Arguments
Description
Value
database_name
Database name
String
database_version
Database version
String
database_displayname
Database display name
String
database_size
Database size (in bytes)
Integer number

Database Object Methods

Function
Description
transaction
Starts transaction.
changeVersion
Checks version and updates schema if necessary.
executesql function in SQLTransaction object is an actual method to execute SQL. You need to execute transaction function in Database object to get SQLTransaction object. When executing executeSql function in SQLTransaction object, the callback function is executed and SQLResultSet object is passed to it.

SQLResultSet Object Properties

Property
Description
insertId
Returns row number when INSERT statement is successful.
rowsAffected
Returns affected rows after sql execution.
rows
Returns ResultSetRowList object. It represents the results of the sql execution.

Executing SQL (SQLite)

1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<meta name="viewport" content="width=device-width, user-scalable=no">
6
<script type="text/javascript" charset="utf-8" src="components/loader.js"></script>
7
<script type="text/javascript" charset="utf-8">
8
9
document.addEventListener("deviceready", onDeviceReady, false);
10
11
function onDeviceReady() {
12
13
window.alert("Create a database and display the content");
14
15
}
16
17
18
function executeQuery(tx) {
19
tx.executeSql('DROP TABLE IF EXISTS TestTable');
20
tx.executeSql('CREATE TABLE IF NOT EXISTS TestTable (id unique, data)');
21
tx.executeSql('INSERT INTO TestTable (id, data) VALUES (1, "あいうえお")');
22
tx.executeSql('INSERT INTO TestTable (id, data) VALUES (2, "かきくけこ")');
23
tx.executeSql('INSERT INTO TestTable (id, data) VALUES (3, "さしすせそ")');
24
tx.executeSql('INSERT INTO TestTable (id, data) VALUES (4, "たちつてと")');
25
tx.executeSql('INSERT INTO TestTable (id, data) VALUES (5, "なにぬねの")');
26
tx.executeSql('INSERT INTO TestTable (id, data) VALUES (6, "はひふへほ")');
27
tx.executeSql('INSERT INTO TestTable (id, data) VALUES (7, "まみむめも")');
28
29
}
30
31
function queryDB(tx) {
32
tx.executeSql('SELECT * FROM TestTable', [], querySuccess, errorCB);
33
}
34
35
function querySuccess(tx, results) {
36
var len = results.rows.length;
37
window.alert("There are " + len + " rows of records in the database.");
38
for (var i=0; i<len; i++){
39
document.writeln("row = " + i + " ID = " + results.rows.item(i).id + " Data = " + results.rows.item(i).data+"<br/>");
40
}
41
}
42
43
//Callback function when the transaction is failed.
44
function errorCB(err) {
45
console.log("Error occured while executing SQL: "+err.code);
46
}
47
48
// Callback function when the transaction is success.
49
function successCB() {
50
var db = window.openDatabase("Database", "1.0", "TestDatabase", 200000);
51
db.transaction(queryDB, errorCB);
52
}
53
54
function createDB(){
55
var db = window.openDatabase("Database", "1.0", "TestDatabase", 200000);
56
db.transaction(executeQuery, errorCB, successCB);
57
58
}
59
60
</script>
61
</head>
62
<body>
63
<h1>Execute the SQL</h1>
64
<input type="button" value="Execute SQL transactions" onclick="createDB()">
65
</body>
66
</html>
Copied!
Last modified 2mo ago