Offline storage of data

We can understand “local data storage” as a
persistent way to storage data on client-side that might be, or not, sent to
server. Can you imagine the potential of this resource? Your application won’t
need to stop working when the user lost his internet connection. A good example
is the offline Gmail, a Google Chrome app. This app let the Gmail users read
and answer theirs e-mails without internet connection.
To have this functionality some developers have used a resource that wasn’t designed to do this, the Cookie. In fact it can be used to make a local data storage, but this is not an efficient way as the Cookie can only store a limited amount of data. Instead of this HTML5 offers an browser native API, called Web Storage.
Web
Storage
Also known as HTML5 Storage the Web Storage
is a data store made by key / value. It’s a simple idea: relate the stored
data to values that can be used to retrieve those data. Because of that
simplicity this way of store data became popular and was implemented in almost
every browser, as shown by Pic 1 that show the browse versions that support the
Web Storage.
Pic. 1 – Browsers that implements the specifications of the offline database and its versions.
The Web Storage can only store string
values, because of that is necessary that the developer deserialize the value
to other data structures. In other words, to store an integer value is
necessary to convert the value to string before store the data. Another
limitation is that the Web Storage can only store 5MBs of data.With those limitations the Web Storage wasn’t a definitive solution and soon another solution was presented to us, the Web SQL database
By the name you can imagine what are the
features of this database, right? The Web SQL is a relational database
structured SQL. So, with this database we can build tables an relate them, beyond that you can execute SQL commands to
access the stored data, as the example shows:
var db = openDatabase('mydb', '1.0', 'my first database', 2 * 1024 * 1024); db.transaction(function (tx){ tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)'); tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "synergies")'); });
The specification of the Web SQL has two
features that should be mentioned. The
first one is that, different from the Web Storage, it has no size restriction,
with that the developer can set the size at the moment of the database creation
and rests with the browser the job to accept or decline the size of the
database. The second one is that the API is natively asynchronous, in other
words, the application doesn’t have to wait for the requests to the server to
be complete as it is needed on synchronous applications. To accomplish that the
Web SQL operations have a callback function that determines in which point the
application will receive the response from the database and process it.
However, the W3C announced in 2010 that the Web SQL database is an outdated specification. And exists a recommendation to the developers not to use this technology. Don’t Worry, no needs to despair. The webkit based browsers still and probably will maintain the support to WebSQL. The new API presented by W3C is the indexedDB, that I’ll show you next.
Indexed Database
The IndexedDB is an API with characteristics
from a NoSQL database. In other words differently from the WebSQL that stores
the data into tables and is relational, the IndexedDB is not relational and
stores the data directly as objects. In
addition of being asynchronous this API is transactional, the commands are
executed through transactions. To every transaction it should define the type:
read only, write only, read and write.
The indexedDB utilizes a value or a set of values as index from the stored objects, like a key / value approach, with that it’s possible to optimize the searches. The IndexedDB is present on every browser on theirs newest versions, because it is a new API. You can check at Pic. 1
Which
one should I use?
Analyzing both API’s it’s difficult to
compare them and choose the best one, to application that already uses a
relational database model the WebSQL is the right choice to do, otherwise the
IndexedDB is the best choice, because is the most updated one and recognized by
W3C, not to mention the vantages of a NoSQL database. Therefore, the decision
of which offline database to use depends a lot of the context of your
application.
To make easy the database choice and the application development the Crux framework has a unique implementation for both types of databases. The Crux supports the database creation with an unique abstract model. The same code could map a database IndexedDB or WebSQL. For a browser that supports one or the other, Crux will use the available one, in the case of a browser the uses both the Crux’s choice is the IndexedDB.
To make easy the database choice and the application development the Crux framework has a unique implementation for both types of databases. The Crux supports the database creation with an unique abstract model. The same code could map a database IndexedDB or WebSQL. For a browser that supports one or the other, Crux will use the available one, in the case of a browser the uses both the Crux’s choice is the IndexedDB.
The local data storage allows a range of possibilities e we can evolve even more the web applications. As we saw, there are a lot of efficient solutions that can facilitate the development. From now on you have the knowledge to get deeper in each one of those technologies, below here there are some links that can be useful to clarify more about this theme.
Good Reading!
Useful Links
http://diveintohtml5.com.br/storage.html
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
http://www.w3.org/TR/IndexedDB/
http://www.html5rocks.com/en/tutorials/webdatabase/websql-indexeddb/?redirect_from_locale=pt
http://www.w3.org/TR/webdatabase/
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
http://www.w3.org/TR/IndexedDB/
http://www.html5rocks.com/en/tutorials/webdatabase/websql-indexeddb/?redirect_from_locale=pt
http://www.w3.org/TR/webdatabase/
Subscribe to:
Posts
(
Atom
)
No comments :
Post a Comment