Why do we need clientSide storage?

Do you know why all websites show these popup to accept cookie policy?

Because they want your permission to save user-specific data to store/access cookies in your browser. The browser has some storage limit which websites use to personalize user experience.

Features of clientSide data storage

• data persistence which means you won't lose the data on page reload or on closing the browser. This property helps in personalizing the user experience on the app.

• Different websites can have different clientSide data(i.e cookie, session, and localStorage).

Types of ClientSide Storages

1. localStorage

It's a key-value pair type client-side storage. It offers a maximum of 5MB limit. At 91wheels, we are using localStorage to store user-specific information like current city and user name for better personalization.

Pros

- Data has no expiry time. However, it can be removed by end-users by clearing browser data.

Cons

• The stored data is in plain-text. Hence, it's not advisable to store critical user information in localStorage.
• It can only be read on the client-side.

How to save data to localStorage:

localStorage.setItem('username', 'dipakkr');

Retrieving data from localStorage:

const data = localStorage.getItem('username');

console.log(data); // dipakkr

2. Session Storage

Features

• It stores data only for a particular session. Session means till the time the browser tab is not closed. Once you close the browser, sessionStorage will be auto-deleted.

• Like localStorage, it can only be accessed from the client. This also means that data is never transferred to the server.

• Session storage also works as a key-value pair type storage.

• The maximum limit of data saving in SessionStorage is about 5 MB.

3. Cookie

• Cookies are the earliest form of clientSide data storage. It is used to store information to personalize user experience on websites.

• The size of the cookie must be less than 4KB.

• Expiry time can be defined in the cookie.

Let's connect on Twitter