Session Storage and Local Storage are two different ways of storing data in a web browser.
In general, Session Storage is specific to a single browsing session, and data is deleted when the browser is closed. Local Storage is stored on the user’s computer, and data is not deleted when the browser is closed
Firstly will start with Session Storage
If you open multiple tabs or windows with the same URL, the web browser creates a separate sessionStorage for each browser tab or window. So data stored in one web browser tab cannot be accessible in other tabs.
When you close a tab or window, the web browser ends the session and clears data in the sessionStorage. Data stored in the sessionStorage is specific to the protocol of the page.
Since the sessionStorage data is tied to a server session, it’s only available when a page is requested from a server. The sessionStorage isn’t available when the page runs locally without a server. Because the sessionStorage is an instance of the Storage type, you can manage data using the Storage’s methods:
// The below is to set the key and vailue pairs in the browser's session sessionStorage.setItem("This is Key", "This is Value"); // The below is to remove the Key and Value pairs sessionStorage.removeItem('This is Key'); // The below is to clear all the session data which is stored in the browser sessionStorage.clear();
setItem(name, value) – setItem Function, set’s the value for a name
removeItem(name) – removeItem remove’s the name-value pair identified by name.
getItem(name) – getItem Function, get’s the value for a given name.
key(index) – key Function, get the name of the value in the given numeric position.
clear() – clear Function remove’s all values in the sessionStorage.
Session Storage in Browser
Last but not least, The Local Storage :
The local storage uses the localStorage object to store your data for your entire website on a permanent basis. That means the stored local data will be available on the next day or any other day also, the next week, or the next year unless if you remove it.
As stated before, the localStorage object stores the data with no expiration date. Each piece or bunch of data is stored in a key and value pair. The key identifies the name of the information. Here’s the JS code to set the local storage :
localStorage.setItem("first_name", "procodersOnline"); // Retrieve data with alert alert("Hi, " + localStorage.getItem("first_name")); //The below is to remove the kay and value pairs localStorage.removeItem("first_name"); // The below is clear all the values from the browser localStorage.clear()
Both the storages are available in the browser, how to check if these data are stored or not is important. It’s a little tricky, here are the below snapshots to check where these data are stored.
Steps to be followed – click on inspect element, then go to Application
For Local Storage :
Happy Coding 🙂