The users of a typical online web application are not able to use the application without internet connection. In offline mode they cannot access data such as inbox of mail, calender appointments etc. But in a desktop application everything is stored locally as some data files.
Now we have a solution for this . HTML 5 is much more than a typical markup language. HTML 5 provides some solutions for this problem. The two major features of HTML 5 for data storage are :
- SQL-based database API.
- Offline Application HTTP Cache.
SQL-based database API
This API helps in structured data storage using a client-side SQL database. The window object has the openDatabase() method to create database objects. The arguments for this method are:
- Database name
- Database version
- Display name
- Estimated size in bytes
For example
var db=openDatabase('mydb','1.0','TestDB',1048576);
|
The transaction() method is used to have further transactions with the created database. The arguments of this method are:
- Transaction callback
- Error callback
- Success callback
On the transaction callback a SQL transaction object is passed on which we can use executeSQL() method. There are one to four arguments for this method:
- SQL statement
- Arguments
- SQL statement callback
- SQL statement error callback
The SQL statement's resultant object gives access to the rows, last inserted ID etc.
Executing Queries
var db=openDatabase('mydb','1.0','TestDB',1048576);
db.transaction(function(tx){
tx.executeSql('CREATE TABLE IF NOT EXIST MYTABLE(id unique,name)');
});
|
Insertion
tx.executeSql('INSERT INTO MYTABLE (id, name) VALUES (1, "SomeName")');
|
Read
Offline Application Caching API
The manifest attribute of <html> element helps to make the web applications available even when the internet is not connected. The manifest attribute takes an URI to be cached. It stores some information in a file like this :
CACHE MANIFEST
index.html
help.html
style/default.css
NETWORK:
server.cgi
The server.cgi should never be cached so that any attempt to access that file will bypass the cache. All other files specified get cached.
The manifest is linked by declaring like this
The server.cgi is in Network: section so that it can be accessed to get updated from the server as in
<event-source src="server.cgi">
|
HTML 5 introduced the new element <event-source> to continuously stream updates from server to a webpage.
HTML 5 contains some other APIs also which helps in data storage. For example onLine attribute of Navigator object determine whether the user is currently online.
localStorage attribute of Window object also helps in simple synchronous storage access.
The offline storage is helpful for mobile web applications to work offline. The user can work offline with the local database and can share the data with the server database when going online
