Web applications currently process large amounts of data on the client-side. They may even be required to labor without access to the internet. These specifications assist to illustrate why client-side data storage is so critical for next-generation Web-based applications.

What is Client-side storage?

Client-side storage, as the name suggests, allows the user to save data on the client (the user’s browser). On the other hand, server-side storage saves data on the server (i.e. an external database).

The image is taken from Wikimedia

In many browsers nowadays, pages are dynamically loaded. This implies they use server-side storage to obtain data from the server and render it in the browser. Client-side storage can, nevertheless, be beneficial in some situations.

When does it come in handy?

The following use scenarios may benefit from client-side storage:

Data may be accessed quickly and without the need for a network.
User preferences can be saved (i.e. font size, theme, etc.)
Save the previous activity’s session (i.e. auth token, user details, shopping cart, etc.)

Client-Side Storage Types

Here are types of client-side storage-

Cookies
Local Storage
Session Storage
Indexed DB

What is the localStorage?

LocalStorage is a feature that allows JavaScript sites and apps to keep key-value pairs in a web browser without their expiring. This means that the data stored in the browser will be preserved even if the browser window is closed. Where we find this stored data

Web storage data is saved in an SQLite file in a subdirectory in the user’s profile in Google Chrome. On Windows PCs, the subdirectory is stored at \AppData\Local\Google\Chrome\User Data\Default\Local Storage whereas, on macOS, it is found at ~/Library/Application Support/Google/Chrome/Default/Local Storage.

Methods for adding and removing data from Local Storage

There are five different ways to use localStorage in your web applications:

localStorage.setItem('Key', 'value')
localStorage.getItem('Key')
localStorage.removeItem('Key')
localStorage.clear()

// Clear all localStorage

localStorage.key()

// Pass a number to retrieve the key of a localStorage

Object.keys(localStorage); find all keys

What is Session Storage?

The Session Storage saves data in the form of Keys and Values for a single session. When the browser is closed, the data stored in Session Storage will be removed.

Methods for adding and removing data from session storage

sessionStorage.setItem('Key', 'Value')

// Save data to sessionStorage

sessionStorage.getItem('Key')

// Get saved data from sessionStorage

sessionStorage.removeItem('Key')

// Remove saved data from sessionStorage

sessionStorage.clear()

// Remove all saved data from sessionStorage

Local Storage vs Session Storage

The image is taken from Wikimedia

The expiration date is the difference between Local Storage and Session Storage-

localStorage data will survive until

Deleted by function (clear or remove).
The browser data is cleared by the user.

If the user is using incognito or private browsing, Local Storage data will be lost.

When a tab or browser is closed, the session storage is removed.

The image is taken from Wikimedia

Cookies

Image Source Unsplash

Most people are familiar with the phrase “cookie.” They’ve been around since the advent of the internet and are the most frequent type of client-side storage.
Cookies are sent from the server to the client and are then stored on the client. The stored cookie can be retrieved and provided back to the server when the client makes another request to the server. Cookies are frequently used to keep track of user statistics, manage account sessions, and save user data.
Cookies, on the other hand, are one of the oldest kinds of client-side storage, and as such, they come with a number of security and storage limitations, making them an unsuitable choice for keeping client-side data.

document.cookie = 'username=Gyanendra'
document.cookie = 'username=Gyanendra; expires=any upcoming date and time; path=/'
document.cookie = 'username=Gyanendra; expires=passed date and time; path=/;'

Summary

We’ve gone through Local Storage, Session Storage, and Cookies, and I hope you now understand what they are.

If you have any questions concerning these three, please respond to this article and I would gladly assist you.

I hope you enjoyed reading this lesson; you can follow me to read more tutorials from me in the future. Thank you for your time.