Development using WEB SQL DB and Local Storage

Most recently, Habré was a post dedicated to working with WEB SQL DB. One of the useful applications of local databases is working offline. In addition, I will show another way of working when local storage is used instead of sql, which is already supported by a large number of browsers.

Definition of offline mode

To begin with, we define that we work in offline mode. There are several ways. First, we can send a request, and in case of failure, start working in the right mode. But HTML5 allows you to define it in a simpler way, namely

navigator.onLine

Unfortunately, this will only work in Opera and Firefox ( www.html5demos.com/ is a good site that shows support for a particular feature by browsers).
Having determined that we are offline, we can proceed to further work. It is important to remember that by this time, all the resources we need should be zapped. More information about creating a cache for offline applications can be found here . And on StackOverflow, you can read a discussion about which method is still more convenient.

We work with WEB SQL DB

Working with the base is easy enough
')
First create it.

db = openDatabase( "TestDB" , "1.0" , "HTML5 Database" , 200000); .

The following parameters are passed to the database creation function:

• Database name
• Her version
• Display Name
• Size in bytes

Next, open the transaction and perform the actions we need.

db.transaction( function (tx)
{
tx.executeSql( "DELETE FROM tbl_test WHERE id = ?" , [item.id]);
});


And then everything like that. I would like to suggest an alternative, namely the jQT Database library.
Here you can read how this plugin works. And you can download it here if you try to download it from the link given in the first source, nothing will come out.
In short, how it works.

Initialize the database:

jQT.dbOpen(“name”, “version”,”descriptione”, size);

Create a table:

jQT.dbCreateTables(json);

Insert the lines:

jQT.dbInsertRows(json);

Select lines:

jQT.dbSelectAll(“table”, callback(result));

Delete the lines:

jQT.dbDeleteRow(“table”,”key”,”value”);

Delete the table:

jQT.dbDropTable(“table”);

Run query:

jQT.dbExecuteQuery(“Query”,”Debug text”, callback(result));

IMHO, very comfortable.
A couple of comments. The jQT variable is created when working with jQTouch. If you do not want to use extra libraries, then the easiest way is to get into the source code and tear out the necessary code for yourself, since it is written very well.

We work with local storage

Now let's do all the same work, but only using local storage. At first we will start the storage itself.

var storage = window.localStorage;

Now to get an empty variable, it is enough to write the following code.

storage.operations = ""

Now we are faced with the question of how to organize data storage. My solution was to store the text version of xml and its subsequent conversion. (Actually, in my case, the solution was quite obvious and probably the only one, since the web service returned xml to me)

We execute a request to the server (I use jQuery and, I think, it will be easy to use this code in other frameworks).

$.ajax({
url: '/operations/get/' ,
type: 'POST' ,
success: function (res) {
var successful = $(res).find( "successful" ).text();
if (successful == "true" ) {
storage.operations = "<result>" ;
var jobz = $(res).find( "return" ).children();
jobz.each( function () {
var nodName = $( this )[0].nodeName;
if (nodName == "OPERATIONS" ) {
var operation = $( this );
storage.operations += "<operations>" + operation.html() + "</operations>" ;
}
});
storage.operations += "</result>" ;

} else {
storage.operations += "<?xml version='1.0' encoding='utf-8'?><result></result>" ;
}
}
});

So, we have executed the request. Since the result is xml, in order to work with it as a DOM object in jQuery, it is enough to simply wrap it with $ (). Unfortunately, this does not work in Internet Explorer, where the following code is needed to translate text into a DOM object

function getXml(text) {
try {
var xmlDocument = new ActiveXObject( "Microsoft.XMLDOM" );
xmlDocument.async = "false" ;
xmlDocument.loadXML(text);
return xmlDocument;
} catch (e) {
alert(e.description);
}
return null ;
}

You can read about working with web services in IE here .

If the request is successful, then we select all descendants of the root node (in my case they can be of several types) and wrap it with the necessary tags. I note that the .html () call will return exactly the code with the tags, while .text () will return only the content inside the tags.

Now to get what we have saved we are doing the following function.

function getOperationsFromStorage() {
return $(storage.operations).find( 'operations' );
}

You can work with it as follows.

getOperationsFromStorage().each( function () {
var id = $( this ).find( 'id' ).text();
alert( "Find entitie with id " +id);
});

As you can see, every time we wrap this $ () and call its .find () method. If we have nested entities, then we can get to them as follows.

$( this ).find( "otherInfo" ).each( function () {
var name = $( this ).find( "name" ).text();
alert(“Found inline tag value ”+name);
});

There is one more question, how to update our object. I do it like this.

var s = "<operations>" ;
s += "<id>" + someId+ "</id>" ;
s += "<type>" +type+ "</type>" ;
s += "</operations>" ;
var text = storage. operations;
text = text.substring(0, text.length - 9);
text += s + "</result>" ;
storage. operations = text;

As you can see, I cut off the closing tag, append a new object and at the end close it again with a wrapping tag.

I hope that now the work on creating offline applications will become easier.

PS: In conclusion, I would like to talk about the Modernizr library, which allows you to determine if a browser supports one feature or another.