Introduction:
Since we are all aware that the data is usually stored on the server,we
have a yet another unique feature that lets the user to store the data in the
client side using several different API’s such as web storage, webSQL Database,Indexed
Database and File hard drive.
Reasons to use a client side storage rather than the server side-
- To make the web app available offline
- To improve the performance
The Features
Client side storage
device:
The main aim of client-side storage is that the data is passed to the
browser’s storage API which saves the data on the local device as it stores
preferences and cache.One can not only save the data this API also lets the
user to retrieve data and perform searching and manipulation.
SandBoxed:
All the four storage API’s put the data in a single location .
Example :
If the url http://myweb.mypage.com saves some data then the browser will only permit the same domain
to access the data in future.Here the
domains as well as the port number should also match for access of the data
that is stored.
Quotas:
To get to know how much space can be used in the browser quotas is
used.The browsers impose limits on storage capacity.When the app attempts to
exceed that limit the browser will show the dialog to let the user confirm the
increase.In some environments the users can see before hand how much data is
being used for example like the chrome webstore.
Transactions:
Both client side storage and server side storage formats support
transactions.Transactions prevent race conditions wherein two sequences of
operations are applied to the database at the same time leading to results that
are unpredictable.
Synchronous and Asynchronous
modes:
In synchronous mode first the storage happens then the javascript code
gets executed,but whereas in asynchronous mode the javascript code gets
executed and then the storage happens.However synchronous mode should be
avoided at all costs,because it blocks the rendering on the page and sometimes
freezes the browser.
Different client-side storage API’S
Local Storage:
The webstorage consists of objects called as local storage and session
storage.The local storage values can be set using localstorage.mydata=”data”
and it can retrieved any time later even when the browser is closed and
re-opened as local storage. mydata and there is also a second object called the
session Storage which has the same functionality but it is cleared when the
window is closed.
Web SQL Database:
It is a structured database with all the functionality and complexity of
a typical relational database.It is supported on major mobile browsers like
Android Browser,Safari,Opera and desktop browsers like Chrome,Safari and
Opera.It supports a transactional database model.
Indexed Database:
An indexed database is a collection of “object stores” which are nothing
but tables in which a user can just create objects and throw the objects into
it.We can have any number of databases ,and to increase the search speed we can make use of asynchronous API.
FileSystem:
The file system is capable of storing BLOB content which is nothing but
Binary Large Objects consisting of images,audio, video, PDF’s etc.,It gives
good performance since it is an asynchronous API.It is available only on chrome
and opera.It doesn't have a transaction support.
Example
//To check the availability of store
If(!localStorage.checkins)
localStorage.checkins = JSONs.stringify([]);
localStorage.checkins = JSONs.stringify([]);
To create the database structure in Web SQL
Database if it doesn't exist openDatabase is used
this.db = openDatabase('mysampledb','1.0','mysampledb
Checkins', 8192);
this.db.transaction(function(tx){
tx.executeSql("create a table if it doesnot
exists" + "checkins(id integer primary key asc, time integer, latitude
float," + "longitude float, mysample string)", [],
function() {
console.log("it is working");
});});
console.log("it is working");
});});
To set up an indexed database –
var db;
var myversion = 1;
window.indexedStore = {};
window.indexedStore.setup = function(handler) {
// attempt
to open the database
var request
= indexedDB.open("mysampledb", version);
//
upgrade/create the database if needed
request.onupgradeneeded = function(event) {
var db =
request.result;
if (event.oldVersion
< 1) {
//
Version 1 is the first version of the database.
var
checkinsStore = db.createObjectStore("checkins", { keyPath:
"time" });
checkinsStore.createIndex("moodIndex", "mood", {
unique: false });
}
if
(event.oldVersion < 2) {
// In
future versions we'd upgrade our database here.
// This
will never run here, because we're version 1.
}
db =
request.result;
};
request.onsuccess = function(ev) {
// assign
the database for access outside
db =
request.result;
handler();
db.onerror
= function(ev) {
console.log("db error", arguments);
};
};
};
This is how we set
up a file system:
setup: function(handler) {
requestFileSystem(
window.PERSISTENT,
1024*1024,
function(fs) {
fs.root.getDirectory(
"checkins",
{},
// no "create" option, so this is a read op
function(dir) {
checkinsDir = dir;
handler();
},
function() {
fs.root.getDirectory(
"checkins",
{create: true},
function(dir) {
checkinsDir = dir;
handler();
},
onError
);});},
function(e) {
console.log("error "+e.code+"initialising “);
});}
Conclusion:
Until now we have been only aware of storing our
data in the server but here there is another concept called as the client
storage where the data can be stored along with its preferences and cache at
the client side itself.The browsers come with built in functionality of storing
the data at the client side.So guys ,lets check out how this works!!!
