HTML5 Web Storage /Local Storage And Session Storage

Introduction

 

Before discussing web storage, first, we should know about storage. Storage is the mechanism for saving digital data. Using this mechanism, we can save, update, fetch, and delete our data as per our requirement. Storage is divided into two types - volatile storage and non-volatile storage. Basically, for permanent storage, we need non-volatile storage. Databases, spreadsheets, and XML are used to store digital data.

 

In a web application, there are two sides - client-side and server-side. Previously, we used cookies for holding the values on client-side. HTML's version 5 was introduced with web storage. Web storage is used for holding values on the client-side. Unlike cookies, the capacity of web storage is much larger. There is no boundary of data type in web storage, we can use arrays, object, string, integer, etc. for the web storage datatypes. Web storage holds data using key-value concepts.

 

Web Storage Object

 

There are two types of web storages available.

1. localStorage 
2. sessionStorage

localStorage

 

Local storage size capacity is approximately 10mb per domain in mobile and web browsers. The size differs in desktop browsers -- 10mb to 5mb depending on the browser version. The size differs in mobile browsers from 10mb to 2mb depending on the browser version. It is persistent, i.e., the local storage holds the value until we have not cleared the local storage.

 

sessionStorage

 

It is the same as local storage. The only difference is that it is not persistent, which means session storage holds the value until the session is expired.

 

There are six different methods available for web storage,

1. getItem(key) - This method is used for fetching the value.
2. setItem(key, value) - This method is used for setting value for the key.
3. removeItem(key) - This method is used for removing the key.
4. key(index) - This method is used for getting the key on the given index.
5. clear() - This method is used for deleting the web storage.
6. length - This method is used for getting the number of items stored in the web storage.

Example

 

In the below code, I took a string as an example to know how to use a string in local storage.

 

setItem(key,value)

localStorage.setItem("myName","Bidyasagar");

The above example is used to set the 'key' and 'value' in localStorage. I used 'myName' as key and 'Bidyasagar' as value.

 

getItem(key)

var getName=localStorage.getItem("myName");

The above example is used for getting the value of the local storage using 'key'.

 

key(index)

var keyVal= localStorage.key(0);

The above example is used for getting the index key value from the local storage using 'index' as parameter.

 

length

var lengthVal= localStorage.length;

The above method is used to get the length of the local storage.

 

removeItem(key)

localStorage.removeItem("myName");

The above method is used for removing the key from the local storage.

 

clear()

localStorage.clear();

The above method is used to permanently delete the local storage from the application.

 

In the below code, I used an array as an example to know how to use a string in local storage. In the below example, I will just implement how to set and get the array value using local storage.

var arrayVal = [10, 20, 30];

localStorage.setItem("array", JSON.stringify(arrayVal));
arrayVal= JSON.parse(localStorage.getItem("array"));

As the session and local storage both are the same,  I did not take any other example for session storage.

 

Summary 

 

In this session, I discussed web storage characteristics. I have implemented some examples also. I hope this session will help you to understand web storage.

 

Thanks for reading this, Happy to help you.