home

HTML5 Web Storage Types

Web storage used to store data in a web browser similar to cookies. The persistence of information in the user browser has historically been limited to keys/values in cookies but with a greatly enhanced capacity and no information stored in the HTTP request header.

There are two main web storage types:
1) local storage
2) session Storage

Web Storage size

Web storage provides far greater storage capacity
5 MB - per origin in Google Chrome, Mozilla Firefox, and Opera
10 MB - per storage area in Internet Explorer
25MB - per origin on BlackBerry 10 devices compared to 4 kB (around 1000 times less space) available to cookies.

Local Storage

This section is going to explain about local storage which is part of web storage. Html5 local storage web application data stored locally within the user browser, even the user closed browser the data available for next day and month, year.

Using Local Storage is quite easy, all you have to do is just to modify (add/edit/delete items) the localStorage object in JavaScript. You can do that via the following functions:

//checking browser compatibility
if (typeof(Storage) != "undefined") {
    // Store Key and Value on user browser for duration of the session
    localStorage.setItem("name", "Anju royal");
    // Retrieve value (gets deleted when browser is closed and re-opened)
    document.write (localStorage.getItem("name"));
} else {
    document.write ("Sorry, browser not supporting");
}

Example code Explanation

setItem(key,value): used to save to the database key / value

Store Key and Value on user browser for duration of the session and Retrieve value (gets deleted when browser is closed and re-opened)

Local storage Advantages

  1. Local storage data more secured.
  2. Stores large amounts of data locally.
  3. There is no effect on application loading.
  4. Local storage better than cookies.
  5. Supports only modern browsers

Local Storage Objects

local storage provides 2 objects for storing data on the client:
•  window.localStorage - The local Storage object stores the data with no expiration date, data will not be deleted when the tab or browser closed data available for next day.
•  code.sessionStorage - stores data for one session, data is lost when the tab is closed.

Before Html5

Application data had to be stored in cookies, included in every server request

Session Storage

Session Storage completely different to local storage, session storage holds the data still browser opened a window for as long as the window is open when the browser window closed or deleted the data from the browser, its store only one session.

Session storage offers a simple key structure like - Name/value pairs are always stored as strings.

// Store value on browser for duration of the session
sessionStorage.setItem('key', 'value');
 
// Retrieve value (gets deleted when browser is closed and re-opened)
alert(sessionStorage.getItem('key'));

Difference between local storage and cookies

Local storage Local storage stores the data in the form of key and value, The data is stored for longer duration in the browser till user delete it expressly, it remains even after computer restarts no specify timeout period, it can store large amount of data, at least 5MB good to create offline web application which runs client machine (user browser) and easy to work with the JavaScript, it is purely client side.

Cookies good for small amount of data difficult to work with JavaScript, all data is transferred to and from server, so bandwidth is consumed on every request, Can specify timeout period so that cookies data are removed from browser

WebSQL Database

The Web SQL Database is not a part of the HTML5, but it is a separate specification which introduces a set of APIs to manipulate client-side databases using SQL.

The Core Methods:

1. openDatabase: This method creates the database object either using existing database or creating a new one.
2. transaction: This method gives us the ability to control a transaction and performing either commit or rollback based on the situation.
3. executeSql: This method is used to execute actual SQL query.

Database Structure

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

Above method took following five parameters:
1. Database name
2. Version number
3. Text description
4. Size of database
5. Creation callback

IndexedDB

IndexedDB is a new in HTML5, this is an API for storing data and giving the response persistently to user’s browser in online and off-line. One can also use cookies and local storage, but they don’t provide database like usability the way IndexedDB do. By allowing developers to create applications with rich query abilities. This allows you to store data using a simple key-value pair only, the IndexedDB is more powerful and useful for applications that require you to store a large amount of data.

HTML5 Application Cache

With HTML5 Application Cache it is easy to access offline(ability to access a web application even without a network connection) web application by creating a cache manifest file. Application consistently downloads from the server as user request through the internet, for this to happen there must be an internet connection. Even there are many instances when users cannot connect to a network this html5 provides to access to the web application without the internet by creating the cache manifest.

Web applications run based on URLs. These can be identified by HTML, CSS, JavaScript, images or any other source that is required for a web application to be rendered. For all the files needs to create the cache by creating a manifest file. The Manifest File is a simple text file, which tells the browser what to cache and what not to cache.

The manifest file has three sections:

CACHE MANIFEST(Creating Cache)
NETWORK(No-Cache)
FALLBACK(Inaccessible)

CACHE MANIFEST

Files listed under this heading will be cached after they are downloaded for the first time and works in offline

CACHE MANIFEST
/style.css
/logo.png
/jquery-min.js 

NETWORK

Files listed under this heading that will never be cached

CACHE MANIFEST 
NETWORK: 
/checking.cgi
CACHE:
/style.css
/jquery.js
/logo.png

FALLBACK

Files listed under this heading specifies fallback pages if a page is inaccessible

CACHE MANIFEST
FALLBACK:
/ /offline.html 
NETWORK:

HTML no-cache meta

<meta http-equiv="Pragma" content="no-cache">