HTML5 Web Storage

Before HTML5, to store or save small piece of information or text you have used cookie which is small text file used by website to store different information like expiration date, activation date, user encrypted password etc.

HTML5 introduced web storage which lets you store information inside the web page instead of using cookies. This is more secure and faster mechanism without compromising website performance. Now it is possible to store large amounts of data (at least 5MB) without affecting the website's performance.

HTML5 introduced two new objects to store information on the client which are known as "Local Storage" and "Session Storage". The Local Storage is used to store information when you don't require any expiration and it is per domain whereas Session Storage is used to store information for one session.

Before using local storage, you need to check whether browser is supporting for localStorage and sessionStorage

Local Storage

In HTML5, Local Storage is intended to store the data inside a web page without expiration date. The stored data without expiration date will not be removed when the browser is closed and will be available the next day, week, or year.

To create a localStorage is quite simple. In HTML5 localStorage object can be used to store data in two different way, by using built in method setItem(name,value) which accept name/value parameter. Look at below syntax.

Syntax1

The anothe way of using localStorage is to create dynamic property to localStorage object look at below syntax.

Syntax2

Browser Support

Almost all latest browsers like Safari, Google Chrome, Mozilla Firefox, Opera and Internet Explorer support many HTML5 features and functionalities.