What Are The Different Kinds of Browser Storage And How To Use Them?

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 sessionStorage 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 cookie help 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 exceed 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 localStorage, 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 localStorage data from its browser, it does not matter if the user closes the window or tab the data will be 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

<table>
<tbody>
<tr>
<td><strong>Parameters</strong></td>
<td><strong>Cookies</strong></td>
<td><strong>localStorage</strong></td>
<td><strong>sessionStorage</strong></td>
</tr>
<tr>
<td>Browser Support</td>
<td>HTML 4/5</td>
<td>HTML5</td>
<td>HTML5</td>
</tr>
<tr>
<td>Data Access window</td>
<td>Can be accessed through any window</td>
<td>Can be accessed through any window</td>
<td>Data can be accessed through Same tab</td>
</tr>
<tr>
<td>Life Span</td>
<td>Never Expire automatically</td>
<td>Never Expire Automatically</td>
<td>Expire when the tab is close</td>
</tr>
<tr>
<td>Storage Location</td>
<td>Browser and server</td>
<td>browser</td>
<td>Browser</td>
</tr>
<tr>
<td>Sent to server</td>
<td>Sent to the server with every request</td>
<td>Data does not send to the server with every request</td>
<td>Data does not send to the server with every request</td>
</tr>
<tr>
<td>Capacity</td>
<td>4KB</td>
<td>10 MB</td>
<td>5 MB</td>
</tr>
</tbody>
</table>
#BBD0E0
»

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.