In HTML 5 we have a new feature called Local Storage which is also known as Web Storage or Browser Storage, and this feature allow web applications to store data locally on the user’s browser. Before Web Storage, Browser Cookies were supposed to hold the application data such as login details and password, and still many browsers give support for the cookie storage. These new features in HTML5 introduced as HTML5 APIs, and there are two of these API's session Storage and localStorage, and these two APIs also known as HTML web storage objects. 

Problems with Cookies!

Many web-site and browser use cookie memory to store important data of the application and this cookie memory is stored in the user browser as well as it sent back to the web-server, for instance, a cookie helps you to store the login information of the sites so you could able to log in automatically.

Security is the major concern of cookies, and with the cookies, our search and browser history can be tracked. The size of the cookie also a big problem, the size of a cookie could only be 4KH, however, the browser allows you to have 30 to 50 cookies, but if your cookie size exceeds the 4 KB limit than the data of cookie will be stored into another cookie.

Web Storage

Web Storage provides the solution for the cookies limitations, it basically provides two major features, first, it provides a simple API to set and get key: value pairs and second, it provides us with a large amount of disk space as compared to cookies, web storage provide us with 5 to 10 MB of local browser storage.

The data which is stored in the web storage can be access through JavaScript. With the help of local Storage, you can store data even if you are offline, and the data automatically sent to the server when you get back online.

Web Storage Objects

In HTML5 we have two objects for storing the data on the user browser:

• localStorage
• sessionStorage

localStorage Object:

The localStorage object store the data on the user browser for a lifetime unless the user itself delete or flush the local Storage data from its browser, it does not matter if the user closes the window or tab the data will remain in the browser unless the browser is delete of the memory of the browser is cleared.

Example:

localStorage.setItem("Name", "Luffy");
var user_name = localStorage.getItem("Name");
document.write(user_name);

Output:

Luffy

Behind the Code:

Here in the example we have used the localStorage object and its setItem() method to set a key “Name” and value “Luffy” pair, using the localStorage.getItem("Name"); statement we retrieve the value Luffy by using its key Name.

Using the method removeItem() we can remove the data.

localStorage.removeItem("Name");

sessionStorage Object:

The sessionStorage is similar to the localStorage but its lifespan remains till its current tab or its session is on, once you close the tab or terminate the session or even close the window the data on sessionStorage also get lost.

Example:

sessionStorage.setItem("Geust_user", "Luffy");
var user_name = sessioinStorage.getItem("Geust_user");
document.write(user_name);

Output:

Luffy

Difference Between Cookies, localStorage, and sessionStorage:

Parameters	Cookies local	Storage session	Storage
Browser Support	HTML 4/5	HTML5	HTML5
Data Access window	Can be accessed through any window	Can be accessed through any window	Data can be accessed through Same tab
Life Span	Never Expire automatically	Never Expire Automatically	Expire when the tab is close
Storage Location	Browser and server	browser	browser
Sent to server	Sent to the server with every request	Data does not send to the server with every request	Data does not send to the server with every request
Capacity	4KB	10MB	5MB

Conclusion:

For most of the cases, we use the localStorage object however if we want some data to be on the browser as well as on the server then we use cookies, and the sessionStorage is used when we want to destroy the data at the time that specific tab gets closed. There are also some security issues with the Web Storage objects but they considered more secure than the cookies.

There is also a major drawback of localStorage and sessionStorage, we can only store string using these two objects, however, we can also use the string to represent JSON object by using JSON.stringify()and JSON.parse() methods.