What are Differences Between Cookie, Local Storage and Session Storage

As we started using HTML 5, we had various options to cache or store info on the client browser. This concept of it on the client side has been around for a long time. Earlier, we only used cookies to store data on browsers, which was very restrictive as the size of it was very small, but now we also have local storage and session storage. Although they have been discussed in the past, they are still being used for several purposes. They are still used to store user personalization and state data.

Hence, modern web browsers offer various options for storing the website’s data on the user’s browsers, also known as browser storage. This allows the data to be retrieved whenever needed. It also allows data to be kept for long-term storage and various other use cases, such as saving the website's content or documents for offline use, user preferences, and much more.

Understanding Browser Storage

Browser Storage or Client-side Storage works on similar principles to server-side storage but has different use cases. It consists of JavaScript APIs that allow us to store data on the client (i.e., on the user's machine) and retrieve it when needed.

There are a few ways by which we can store the data locally on our browsers, and the three popular ways are cookies. There is one main similarity between the three, and that is all three of these are stored on the user’s browser. If the user’s data is stored in Chrome, that database will not be visible in other browsers, such as Firefox. So basically, there are some ways modern browsers provide to store data on the client side that can be retrieved when necessary.

Benefits of storing data in the browser

There are several reasons why many of the websites and apps we come across store some data locally in the browser. The major reason associated with browser storage is performance. The data stored locally in the user's browser is instantaneously available, and on the other hand, the remotely stored data is sent from the server to the user. Since the server response takes some time after a request is made for the data, we cannot always wait for it, so sometimes. It is beneficial to store the data in the browser for quicker access. 

This implies that if the website relies on any data for the information to be accessed frequently. This information could have many distinct uses, such as:

• Persisting data from a previous browsing session like your username, storing the contents of a shopping cart from the previous session, items in a To-do list, remembering if a user was previously logged in, etc.
• Personalization of the site settings/preferences that affect how your page renders
• Settings like the user’s choice of colour scheme, font size, and whether some UI elements are visible.
• Saving data and assets you want to keep handy if the network connection goes offline or for the site to load quicker.
• Data for tracking or analysis needs to be updated frequently.

What is Web Storage?

Web storage, such as HTML 5, was introduced. This made storing and retrieving data in browsers much easier, and one of the major improvements made with these in client-side storage was the storage size, which is much better than cookies. Web storage could be accessed using Javascript, and the server could not read any of this data unless manually passed along with the request. 

There are two objects for data storage on the client provided by HTML web storage:

• Local storage object - Stores data with no expiration date.
• Session storage object - Stores data for one session (data is lost when the browser tab is closed).

Local Storage

It is a web storage method that helps us store data on the client’s computer in the form of key/value pairs in a web browser. The data is stored locally for a lifetime unless the user manually deletes it from the browser. It does not expire even when the user closes the window or tab. Instead, the data remains in the browser until and unless the browser's memory is cleared. 

Its data in the browser can only be accessed via JavaScript and HTML5. However, the user could also clear the browser data/cache to erase all local storage data. It has four methods that we can use to set, retrieve, remove and clear:

• We can use the setItem() method to set the data in local storage. This method takes two parameters, i.e., key and value. With this method, we can store value with a key. localStorage.setItem(key, value);
• To retrieve the data stored in it, we can use the getItem() method. This method takes only one parameter: the key whose value we need to access. localStorage.getItem(key);
• We can remove the data using the removeItem() method, which is stored in memory about the key. localStorage.removeItem(key);
• The clear() method is used to clear all the stored data.

The local store has pros and cons to using local storage based on our use case.

Pros

• The data stored in it has no expiration date
• The storage limit is about 10 MB
• Its data is never transferred to the server

Cons

• Its data is plain text; hence, it is not secure by design
• The data type is limited to string; hence, it needs to be serialized
• Data can only be read on the client side, not on the server side

Session Storage

It is very similar to the local storage. Still, the main difference lies in the lifespan, as it persists in the browser until its current tab is on. Once you close the tab or terminate it, the data on session storage also gets lost. We can also set and retrieve its data using setItem() and getItem() methods, which are similar to the local storage methods. For example:

• sessionStorage.setItem(key, value);
• sessionStorage.getItem(key);

Cookies explained: What you need to know

Before HTML 5 was introduced, cookies were the only option available. So, storing data with them is a legacy approach to storing data on the client machine. Cookies help us store client-side data to enable a personalized experience for the website’s users. They are sent with requests to the server and the client in response; hence, their data is exchanged with the server on every request. The servers could use the cookie data to send personalized content to users. 

Like web storage, cookies can be created, updated, or read through JavaScript: document. Cookie. We have an HTTP-only cookie flag available, which can restrict cookie access in JavaScript to mitigate a few security issues, such as cross-site scripting. 

Cookies are categorized into two types: session cookies and persistent cookies.

Session cookies

It does not specify attributes such as Expires or Max-Age and is removed when the browser is closed.

Persistent cookies

Persistent cookies specify the Expires or Max-Age attributes. These do not expire on closing the browser but will expire at a specific date (Expires) or length of time (Max-Age).

Analysing use cases and their comparisons

There are many cases where browser storage methods are used. The most common use cases of browser storage are:

• Personalizing site preferences
• Persisting site activities
• Storing the login state
• Saving data locally so that the website will be quicker to download or use without a network connection
• Improving website performance
• Reducing back-end server requests

Browser storage methods could be differentiated based on three main parameters: storage limit, accessibility, and expiration.

Storage limit

Each browser storage method has a specific maximum data size. Both storage methods provide a large memory capacity. Specifically, local Storage stores up to 10 megabytes, and session storage stores up to 5 megabytes. On the other hand, these provide a very restrictive and small storage capacity of 4 kilobytes, so we cannot store large amounts of information in cookies.

Accessibility

From the accessibility perspective, it can be accessed in any window or tab open on the website's browser. But if we talk about it, since session storage is tied to the particular session and each tab has its session, data is only available in the current tab where we’ve set the session storage data. Lastly, cookies are similar to local storage as they are accessible from any window or tab. It could also be accessed on the server. Whenever we request the back-end server, all the cookies are also sent along. So, they are also used for tasks related to authentication.

Expiration

Its data never expires until you manually remove it, so in that sense, it could be very useful. Its data expires as soon as we close the tab because data is only available to a particular session and is equivalent to a tab. These are unique as we can manually set their expiration date.