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".


Comments

Post a Comment

Popular posts from this blog

Email Sending through O365 using OAuth Protocol

-
  Microsoft Office365 EWS servers have been extended to support authorization via the industry-standard OAuth 2.0 protocol. Using OAUTH protocol, user can do authentication by Microsoft Web OAuth instead of inputting user and password directly in application Microsoft / Office 365 OAuth + EWS We can use the OAuth authentication service provided by Azure Active Directory to enable our application to connect with IMAP, POP or SMTP protocols to access Exchange Online in Office 365. To use OAuth with our application we need to register application on Azure Active directory and other steps also we need to do to get the access token back. Below are the steps   To use Microsoft/Office365 OAUTH in your application, you must create an application in  https://portal.azure.com . Sign into the Azure portal using either a work or school account or a personal Microsoft account. If your account gives you access to more than one tenant, select your account in the top ...
Read more

IoT Technology

-
Image
IoT technology The Internet of Things (IoT) is a system of interrelated computing devices, mechanical and digital machines.  IoT is a network of sensors where data is exchanged, using different connectivity protocols, with systems. This set up can be leveraged to create a new business application or to enhance an existing process. The exchange of the data can be bi-directional between sensors and systems Examples of sensors can be temperature sensors, motion sensors, flow meters, heart meter monitors, biometric devices, smoke detectors, & etc Examples of connectivity can be wifi, radio, GPRS, GSM, LAN, WAN, & etc. Examples of systems can be a remote health monitoring applications, SCADA applications, etc Look at next slide about the complete flow of IoT process Examples A doctor in US would like to monitor the heart rate and ECG of a patient in Hyderabad. This is done with the patient having sensors attached to him that collect the ECG data and the hea...
Read more

What is reverse proxy?

-
Image
  What is a reverse proxy? A reverse proxy is a server that sits in front of web servers and forwards client (e.g. web browser) requests to those web servers. Reverse proxies are typically implemented to help increase  security ,  performance , and reliability . In order to better understand how a reverse proxy works and the benefits it can provide, let’s first define what a proxy server is. What’s a proxy server? A forward proxy, often called a proxy, proxy server, or web proxy, is a server that sits in front of a group of client machines. When those computers make requests to sites and services on the Internet, the proxy server intercepts those requests and then communicates with web servers on behalf of those clients, like a middleman. For example, let’s name 3 computers involved in a typical forward proxy communication: A: This is a user’s home computer B: This is a forward proxy server C: This is a website’s origin server (where the website data is stored) In a stand...
Read more