HTML 5 Web Storage

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

Introduction
 
The concept of local and session storage in a web application was introduced in HTML 5. Before HTML 5, the local data in client side was stored in the cookies. Unlike cookies, now the web application can store the data locally within the browser which can’t be transferred to the server.

There are two types of web storage.

  1. Local Storage
  2. Session Storage

Local Storage

Local storage stores the data, the data persists until the user manually clears the browser cache or programmatically clears the storage.

Adding Entries

We can add the data in local storage by providing the key and value pair, the localStaorage window object with setItem function is used to add entries to the local storage. The memory limit is based on browser 5-10MB for most of the browser.

localStorage.setItem(‘key’,’value’)

  1. localStorage.setItem('name','value1')  

You can check the data stored in localStorage using the browser developer tool. In Chrome, it will be under the Application tab.

Reading an Entry

We can use getItem function to get the value in the local storage using the key.

localStorage.getItem(‘key’)

  1. localStorage.getItem('name')//return value1  

Updating the Entry

Using the setItem function, you can update the data in localstorage using the same key.

  1. localStorage.setItem('name','value2')  

Delete the Entry

The removeItem method is used to remove the entry from the local storage.

localStorage.removeItem(key)

  1. localStorage.removeItem('name')  

Remove all the Entry in local storage

The clear method is used to clear all the entry in the local storage.

  1. localStorage.clear()  
Note
Before working with web storage, we need to check whether it is supported by the browser which can be done using local Storage object in if statement 
  1. if(window.localStorage)  
  2.                 {  
  3.                   //web storage supported by browser   
  4.                 }  
  5.                 else  
  6.                 {  
  7.                   // Use cookies   
  8.                 }  

Session Storage

Unlike local storage the data in session storage will persist only until the window or the tab in the browser is closed, which means the data will be available only for the particular session.

Between Local and session storage the difference will be only in the persistence of data other than that functionality and functions used in both of these objects will remain the same.

Adding an Entries

  1. if(window.sessionStorage)  
  2.                 {  
  3.                   //web storage supported by browser   
  4.                   sessionStorage.setItem('name','value1')  
  5.                 }  
  6.                 else  
  7.                 {  
  8.                   // Use cookies   
  9.                 }  

Updating the Entry

  1. if(window.sessionStorage)  
  2.                 {  
  3.                   //web storage supported by browser   
  4.                   sessionStorage.setItem('name','value2')  
  5.                 }  
  6.                 else  
  7.                 {  
  8.                   // Use cookies 
  9.                  }  

Delete the Entry

  1. sessionStorage.removeItem('name')  

Remove all the Entry in session storage

  1. sessionStorage.clear()  
I hope you have enjoyed this blog. Your valuable feedback, questions, or comments about this article are always welcomed.