HTML 5 Web Storage : Local and Session

In HTML 5 the web application can store the data locally within the browser which can’t be transferred to the server. Before HTML 5, the local data in client side was stored in the cookies.

There are two types of web storage.

1. Local Storage
2. Session Storage

Local Storage : 

When we store data in Local storage, It can not be cleared until user manually clears the browser cache or pro-grammatically clears the storage.

Add Data:

Syntax : localStorage.setItem('key','value')

Example : localStorage.setItem('name','Nikhil') 

Read Data:

Syntax : localStorage.getItem('key')

Example : localStorage.getItem('name') 

Update Data:

Syntax : localStorage.setItem('key','value')

Example : localStorage.setItem('name','Niks') 

Delete Data:

Syntax : localStorage.removeItem('key')

Example : localStorage.removeItem('name') 

Delete All Data From Local Storage:

Syntax : localStorage.clear()

Session Storage :
Session storage will store data only until the window or the tab in the browser is closed, which means the data will be available only for the particular session.

Add Data:
if(window.sessionStorage)
{
          //web storage supported by browser 
          sessionStorage.setItem('name','value')   //Syntax
          sessionStorage.setItem('name','Nikhil') //Example
}
else
{
          // Use cookies
}

Update Data:
if(window.sessionStorage)
{
          //web storage supported by browser
          sessionStorage.setItem('name','value') //Syntax
          sessionStorage.setItem('name','Niks')  //Example
}
else
{
          // Use cookies
}

Delete Data:

Syntax : sessionStorage.removeItem('key')

Example : sessionStorage.removeItem('name')

Delete All Data From Session Storage:

Syntax : sessionStorage.clear()