HTML5 WEB STORAGE

Web storage is a client-side storage type that helps you store data from your web application into the user’s browser.

It has significant advantages over the conventional cookie storage which existed long enough before the advent of HTML5 even though both helps to store data on the client side:

1. Cookies are included with every HTTP request, unlike web storage.
2. Cookies are limited to 4kb of storage space per cookie while web storage provides as much 10mb of storage space per domain.
3. Although both storage are not so secure, web storage is more secure than cookies.
4. Web storage doesn’t send data over the server with each request call hence making your web application faster.

Before diving in, it is necessary we confirm if our browsers support the HTML local storage. This can be done by running the command below in your browser console:

Types of web storage

There are two types of web storage:

1. Local storage : This stores data over a long time and the data stored in it persists over time even after the browser has been closed and reopened. There is no expiration.
2. Session storage: This stores data temporarily, once the browser is closed, the data is lost.

I wouldn’t say one of the types is better than the other as their use differs so you use them according to the purpose of use.

The web storage methods

The HTML5 comes in handy with a few Javascript methods that make it easy to work with the web local storage as explained below:

Set a key/value: There are two ways to go about this:

1. The shortcut method :

2. The normal method:

Retrieval of data: It is possible to retrieve some values from the storage using the key for such data as described below:

Deletion of data: This can be done using the key for the data as described earlier like below:

Delete the entire storage: This wipes out the entire local storage hence you need to be very careful before making use of this method.

Get the number of values in the storage:

Note: It is important to note that the local storage only accepts string inputs(values), hence you can manipulate your way into its use by converting the types before storing and converting back after storage- in cases where there is need to store a json or object, you can make use of the “JSON.stringify()” method.

Thank you.