Data Storing

Sometimes, you need to store data accessed from the Internet to your local system. The most common method to store data locally in all browsers is cookies, which are key-value pairs of strings that are stored locally in a text file. These text files are sent to the server, having the same domain name, with respect to every Hyper Text Transfer Protocol (HTTP) request. HTML5 provides a new feature that supports the client-side storage, which is further divided into the following types of storage:

• Session storage
• Local storage
• Database storage

Session Storage

Session storage is a storage that acts as cookies but has more storage capacity. A cookie has the capacity to store a maximum of 4 kilo bytes (KB) data; however, a session storage has the capacity to store data in mega bytes (MB). To understand the importance of session storage, let�s consider a scenario. Suppose you have bought two plane tickets from the same site using two different windows at the same time. If the Web application uses cookies to keep track of ticket details, the purchase done in one window can be leaked in the other window. However, in the session storage, such type of leakage does not occur as the data does not remain in the persistent state, and disappears as you close the window. An example of session storage is given in the following code snippet:

sessionStorage.setItem('fullname', 'Charu Verma'); alert("Your name is: " + sessionStorage.getItem('fullname')); alert("Hello " + sessionStorage.fullname); sessionStorage.removeItem('fullname');

In the preceding code snippet, a session variable is defined, accessed, and removed.

Click here for demos to see how to implement session storage:
demo

Local Storage

Local storage is same as the session storage, except the feature of persistency. In other words, a localStorage object can be assumed as a persistent version of a sessionStorage object. The session storage stores the data till the duration of a browser tab session, while the local storage stores the saved data on a user's computer even after closing the browser window. An example of the local storage is given in the following code snippet:

localStorage.setItem('fullname', 'Charu Verma'); alert("Your name is: " + localStorage.getItem('fullname')); alert("Hello " + localStorage.fullname); localStorage.removeItem('fullname');

In the preceding code snippet, the localStorage object is defined, accessed, and removed. The combination of session storage and local storage is called as Web storage or Document Object Model (DOM) storage. A DOM storage object can use the length property to return the number of items in the DOM Storage area.

Click here for demos to see how to implement local storage:
demo

Database Storage

HTML5 also provides database storage to store data on a client's machine using a Structured Query language (SQL) database. It uses a temporary database to store data for a specified period of time. The following code snippet shows how to make a connection with a database:

db = openDatabase("DBTest", "1.0", "HTML5 Database API example", 200000);

The preceding code snippet creates a database object, db, with the title DBTest, a version number of 1.0, along with a description and approximate size.

After creating a database connection, two basic functions transaction() and executeSql() are used to execute a SQL query. The transaction() function takes a single argument, executeSql() function, which actually executes the query. The executeSql() function takes four arguments, a string query, an array of strings to insert the values for place holders in string query, a function on successful execution of the query, and a function on failure of the query.

Click here for demos to see how to implement database storage:
demo