JavaScript - All About Local Storage, Session Storage, and Cookies

On the client-side, today's Web applications process massive volumes of data. They may even need to be able to work without internet access. These requirements help to explain why client-side data storage is so important for next-generation Web-based applications.

Table of content-

• What is Client-side storage?
  • When does it come in handy?
• Client-Side Storage Types
• 1. What is the localStorage?
  • Where we find this stored data
  • Methods for add and removing data from Local Storage
• 2. What is Session Storage?
  • Methods for add and remove data from session storage
• Local Storage vs Session Storage
• 3. Cookies

What is Client-side storage?

Client-side storage, as the name implies, allows the user to store data on the client (i.e. the user's browser). And Server-side storage, on the other hand, keeps data on the server (i.e. an external database).

Image is taken from wikimedia

Nowadays, Pages are dynamically loaded in many browsers. This means they retrieve data from the server and render it in the browser using server-side storage. Client-side storage can, nevertheless, be advantageous in some circumstances.

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 type of client-side storage-

1. Cookies
2. Local Storage
3. Session Storage
4. Indexed DB

1. What is the localStorage?

localStorage is a feature that allows JavaScript sites and applications to save key-value pairs in a web browser without having to worry about them expiring. This indicates that the data stored in the browser will survive the closing of the browser window.

Where we find this stored data

Web storage data is saved in a 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 add 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

2. 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 the Session Storage will be removed.

Methods for add and remove 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 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.

3. Cookies

Image Source unsplash

A cookie is a term that most people are familiar with. They're the most common sort of client-side storage, and they've been there since the dawn of the internet.

The server sends cookies to the client, which are subsequently stored on the client. When the client makes another request to the server, the saved cookie can be retrieved and delivered back to the server. Cookies are commonly used to track user statistics, manage account sessions, and save user information.

Cookies, on the other hand, are the oldest types of client-side storage, and as such, they have several security and storage constraints, making them an undesirable option for storing 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=/;'