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 the 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’)

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’)

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

Updating the Entry

 

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

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

Delete the Entry

 

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

 

localStorage.removeItem(key)

localStorage.removeItem('name')

Remove all the Entry in local storage

 

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

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 

if(window.localStorage)
{
                  //web storage supported by browser
}
else
{
                  // Use cookies
}

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

if(window.sessionStorage)
{
                  //web storage supported by browser
                  sessionStorage.setItem('name','value1')
}
else
{
                  // Use cookies
}

Updating the Entry

if(window.sessionStorage)
{
                  //web storage supported by browser
                  sessionStorage.setItem('name','value2')
}
else
{
                  // Use cookies
}

Delete the Entry

sessionStorage.removeItem('name')

Remove all the Entry in session storage

sessionStorage.clear()

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