Session Storage vs Local Storage: what, why and how?

There are two types of storage in the web world: local storage and session storage.

But, what are they???

Local storage and session storage are two mechanisms for storing data on the client side. Local storage is similar to cookies, it stores data on the client side and persists even after the browser is closed. Session storage, on the other hand, only persists for the duration of the session (i.e., until the browser is closed).

Both local storage and session storage are useful for storing small pieces of data on the client side. For example, local storage can be used to store user preferences, while session storage can be used to store data that should only be accessible for the duration of the session.

Both have their own advantages and disadvantages. Let’s take a look at each one.

Local Storage

Local storage is a type of storage that is persistent. This means that the data stored in local storage will remain even after the browser is closed. The only way to remove data from local storage is to do it manually.

Advantages:

1. Data is persistent, which means it can be used to store data that needs to be accessed at a later time.

2. Local storage is relatively secure since the data is stored locally and not on a server.

3. Data stored in local storage is available throughout the application, although any URL can access only and only its own local storage data

Disadvantages:

1. Since local storage is persistent, it can take up a lot of space if not used carefully. It has a data limit of 5MB

2. Local storage is not accessible from other devices, which means it can’t be used to sync data across devices.

Session Storage

Session storage is a type of storage that is not persistent. This means that the data stored in session storage will be removed once the browser is closed.

Advantages:

1. Session storage is not persistent, which means it doesn’t take up a lot of space. The data limit for this is of 5MB.

2. Session storage is relatively secure since the data is stored locally and not on a server.

Disadvantages:

1. Since session storage is not persistent, data that needs to be accessed at a later time needs to be stored in local storage or on a server.

2. Session storage is not accessible from other devices, which means it can’t be used to sync data across devices

3. Session storage is tab bound, which means data stored in one tab would not be accessible to another tab.

Now, let's look at the syntax for each one of them.

Below is the code snippet to use Session storage.

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage
const data = sessionStorage.getItem('key');

// Remove saved data from sessionStorage
sessionStorage.removeItem('key');

// Remove all saved data from sessionStorage
sessionStorage.clear();

Below is the code snippet to use Localstorage.

// Save data to localStorage
localStorage.setItem('myCar', 'Toyota');

// Get saved data from localStorage
const car = localStorage.getItem('myCar');

// Remove saved data from localStorage
localStorage.removeItem('myCar');

// Remove all saved data from localStorage
localStorage.clear();

So what are you waiting for, fire up the editor and try it all yourself.

Feel free to comment with what you have learnt or any queries that you've.