Differences between localStorage and sessionStorage?

 localStorage and sessionStorage are both ways for browsers to store key/value pairs for a particular domain using the Web Storage API.

For most cases, we use the local Storage object if we want some data to be on the browser. If we want it on the server, then we use cookies, and the session storage is used when we want to destroy the data whenever that specific tab gets closed or the season is closed by the user

we will take a look at the differences among them 

• What is the difference between localStorage and sessionStorage?
• How to use localStorage and sessionStorage?
• How to check localStorage and sessionStorage in the browser?

What is the difference between local storage and session storage?

“The Storage interface of the Web Storage API provides access to a particular domain's session or local storage. It allows, for example, the addition, modification, or deletion of stored data items.”

localStorage and sessionStorage are almost the same. Both have the following rules:

• They store key/value pairs for a particular domain.
• The values stored may only be strings.
• They have a limit of around 5MB of storage space.

The one major difference between localStorage and sessionStorage is the expiration date.

• localStorage persists the storage across browser sessions. So even if the domain is opened in a new tab, or the browser is closed and reopened, the storage is saved. There is no expiration.
• sessionStorage is cleared when the page session ends. A page session lasts as long as the tab or the browser is open. Therefore, when you open a new tab or a new window, this creates a new session and new storage.

How to use local storage and session storage?

You can access localStorage or sessionStorage, using the window object.

myStorage = window.localStorage;myStorage = window.sessionStorage;

For both local storage and session storage, you can set, get, remove, and clear items using the appropriate methods.

Set

The setItem() method takes a key name and a value as arguments. It will then add the key/value pair to the Storage object. If the key already exists, it will update the key’s value.

window.localStorage.setItem(keyName, keyValue);window.sessionStorage.setItem(keyName, keyValue);

Get

The getItem() method takes a key name as an argument. It will return that key’s value. If the key does not exist in the Storage object, it will return null.

var aValue = window.localStorage.getItem(keyName);var aValue = window.sessionStorage.getItem(keyName);

Remove

The removeItem() method takes a key name as an argument. It will remove that key from the Storage object if it exists. If there is no item associated with the key, it will do nothing.

window.localStorage.removeItem(keyName);window.sessionStorage.removeItem(keyName);

Clear

The clear() method will clear all keys stored in the Storage object.

window.localStorage.clear();window.sessionStorage.clear();

How to check local storage and session storage in the browser?

Now that we know how to use localStorage and sessionStorage, let’s check it in the browser. For this example, I am using a Mac and the Google Chrome browser.

First, I created a basic application and opened it in Google Chrome.

To check the Storage, right-click on the page and select inspect to open up the Chrome Dev Tools. Or, you can use the shortcut, Cmd + Opt + J.

From there, select Application and you will see the Storage section. This section contains the Local Storage and Session Storage tabs. If we open up both of these tabs, we can see the page, http://localhost:3000. Within this tab, we can see the key/value pair table. Currently, there should be nothing displayed.

In my app, I can set a key/value pair in local storage using the setItem() method.

window.localStorage.setItem('name', 'BRR');                            

After saving, I will then see the key/value pair stored in localStorage. You can do the same with sessionStorage as well.

We can then use the getItem() method to retrieve the value for the name.

window.localStorage.getItem('name');

This will return the value, "BRR".