Use Session Storage Object over Local Storage in JavaScript

In few instances, we might come across such requirement where we have to retain/store variable values specific to browser tab over successive post back. Normally, If we open same HTML page in multiple tabs in same browser, then variable value retained over successive post back would be same across all opened tabs. But if requirement is to have different variable values for each opened tab then how would we handle? Lets go through it:

Resolution: As we know, there are two options available in JavaScript to retain values over successive post back.

1. Local Storage

2. Session Storage

We can use Local Storage for saving data in browser over successive post back but there are certain limitations. It will save data in browser but data will remain same for all tabs in browser. In such scenario, where we need separate values for each browser tab, we have to use Session Storage object in JavaScript.

Local Storage:

•  It can store data locally within the user's browser.

• Storage limit is far larger (at least 5 MB) and information is never transferred to the server.

• Local storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.

Syntax & Examples for Local Storage:

How to store the value to Local Storage in JavaScript?

Syntax: localStorage.setItem("VariableName", "Value");

Example: localStorage.setItem("BR", "Binary Replublik");

How to retrieve value from Local Storage variable in JavaScript?

Syntax: localStorage.getItem("VariableName") // Returns Object.

Example: document.getElementById("BRTeam").innerHTML = localStorage.getItem("BR");

How to remove Local Storage variable?

Syntax: localStorage.removeItem("VariableName");

Example: localStorage.removeItem("BR");

Session Storage

• The Session Storage object is equal to the Local Storage object, except that it stores the data for only one session. So, the value retained with Session Storage is browser tab specific.

The data will be deleted when the user closes the specific browser tab.

Syntax & Examples for Session Storage:

How to store the value to Session Storage in JavaScript?

Syntax: sessionStorage.setItem("VariableName", "Value");

Example: sessionStorage.setItem("BR", "Binary Replublik");

How to retrieve value from Session Storage variable in JavaScript?

Syntax: sessionStorage.getItem("VariableName") //Returns Object.

Example: document.getElementById("BRTeam").innerHTML = sessionStorage.getItem("BR");

How to remove Session Storage variable?

Syntax: sessionStorage.removeItem("VariableName");

Example: sessionStorage.removeItem("BR");

Conclusion: To store variable value specific to browser tab, we have to deal with session storage over local storage.