Browser Database Storage HTML 5

Browser Database Storage HTML 5
The key-value Storage API is great for persisting data, but what about indexed storage that can be queried? HTML 5 applications will have access to indexed databases as well. The exact details of the database APIs are still solidifying, and there are multiple proposals. 


 One of the proposals, Web SQL Database, has been implemented in Safari, Chrome, and Opera.

Web SQL Database allows applications access to SQLite through an asynchronous JavaScript interface. Although it will not be part of the common Web platform nor the eventual recommended database API for HTML5 applications, the SQL API can be useful when targeting a specific platform such as mobile Safari. In any case, this API shows off the power of databases in the browser. Just like the other storage APIs, the browser can limit the amount of storage available to each origin and clear out the data when user data is cleared.

To begin, we open a database by name. The window.openDatabase() function returns a Database object through which database interaction takes place. The openDatabase() function takes a name as well as an optional version and description. With an open database, application code can now start transactions. SQL statements are executed in the context of a transaction using the transaction.executeSql() function. This simple example uses executeSql() to create a table, insert racer names into the table, and later query the database to create an HTML 5 table.
Database operations can take some time to complete. Instead of blocking script execution until a result set is available, queries run in the background.
When the results are available, a function given as the third argument to executeSQL() is called back with the transaction and the result set as arguments.

Using the Web SQL Database API

<!DOCTYPE html>
<title>Web SQL Database</title>
<script>
// open a database by name
var db = openDatabase('db', '1.0', 'my first database', 2 * 1024 * 1024);
function log(id, name) {
var row = document.createElement("tr");
var idCell = document.createElement("td");
var nameCell = document.createElement("td");
idCell.textContent = id;
nameCell.textContent = name;
row.appendChild(idCell);
row.appendChild(nameCell);
document.getElementById("racers").appendChild(row);
}
function doQuery() {
db.transaction(function (tx) {
tx.executeSql('SELECT * from racers', [], function(tx, result) {
// log SQL result set
for (var i=0; i<result.rows.length; i++) {
var item = result.rows.item(i);
log(item.id, item.name);
}
});
});
}
function initDatabase() {
var names = ["Peter Lubbers", "Brian Albers", "Frank Salim"];
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS racers (id integer primary key
autoincrement, name)');
for (var i=0; i<names.length; i++) {
tx.executeSql('INSERT INTO racers (name) VALUES (?)', [names[i]]);
}
doQuery();
});
}
initDatabase();
</script>
<h1>Web SQL Database</h1>
<table id="racers" border="1" cellspacing="0" style="width:100%">
<th>Id</th>
<th>Name</th>
</table> 


Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)