Local Storage vs Session Storage vs Cookies

In web development, storing data on the client-side is crucial for creating robust and feature-rich web applications. With HTML5, several options are available for storing or caching information on the client browser, including cookies, local storage, and session storage. Each storage mechanism has its own unique benefits and limitations, so it's important to understand their differences.

In this article, we'll explore how these storage options work, their pros and cons, use cases, and compare local storage, session storage, and cookies based on some standard parameters.

Let’s get started!

Local storage

What is Local Storage?

Local storage is a browser feature that web apps use to save data directly on a user's device. This data is stored as key-value pairs in the browser's memory. The key is a unique identifier that is associated with a specific value, making it easy to retrieve the related data.

One of the great things about local storage is that the data remains available even after the user closes and reopens the browser. Although similar to cookies, there are some key differences between local storage and cookies.

Local storage helps reduce network traffic by sending fewer requests to the server. Additionally, it offers a larger data storage capacity compared to session storage or cookies.

How does local storage work?

Local storage is implemented using the HTML5 standard's Web Storage API. Web Storage API provides localStorage and sessionStorage objects to perform operations on local storage.

Any page from the same domain may access persistent storage space provided by the localStorage object. Until it is manually deleted by the user or the program, data kept in localStorage is kept there eternally. Similar storage space is provided by the sessionStorage object, but the information is only accessible by the page that created it and is removed at the end of the browser session.

Take a look at code to know how a local storage can be used to store and retrieve data:

    
            
    
// Store data in local storage
localStorage.setItem('username', 'Anom');
localStorage.setItem('LogIn', true);

// Retrieve data from local storage
const username = localStorage.getItem('username');
const LogIn = localStorage.getItem('LogIn');

// Remove data from local storage
localStorage.removeItem('Anom');

console.log(username); // "Anom"
console.log(LogIn); // "true"

Monitor your users in real time and optimize your digital experience with Zipy!

Get Started for free

Advantages

Pros of Local Storage	Details
Persistent storage	Unlike session storage, which disappears when the browser is closed or the device is turned off, local storage allows developers to preserve data that may be used across multiple sessions and visits.
Large storage capacity	Local storage typically has a storage capacity between 5 and 10 MB per domain. In comparison to cookies or session storage, this enables developers to keep more data.
Faster access	Accessing local storage is quicker than sending a request to a distant server. By lowering the necessary network traffic, this can enhance the performance of online applications.
Better offline support	Even in poor network connectivity, data remains on the users device throughout the browser session.

Disadvantages

Cons of local storage	Details
Limited cross-domain access	One of the local storage limitation is that web applications on separate domains cannot access each other's data.
Security concerns	If you are wondering is local storage secure, that’s a genuine question. Cross-site scripting (XSS) attacks on local storage make it possible for bad guys to take data from a user's device.
No built-in expiration mechanism	If there is no expiration mechanism, then data might accumulate continuously resulting in too much consumption of storage space.
Storage capacity limitations	Data can build over time and fill up more capacity since local storage lacks an internal expiration mechanism, adding one more limitation to local storage.

Use Cases

Here are some common scenarios where local storage is used:

User Preferences: Local storage can keep track of user preferences, such as preferred languages, themes, or layouts. This provides users with a more personalized experience across all devices.
Application Cache: Web applications can store frequently accessed data and assets locally using local storage. This reduces the amount of network traffic needed to load the application.
Shopping Cart: Local storage can be used to save items in a shopping cart, allowing users to add or remove items and have a seamless shopping experience, even if they close their browser.
Offline Access: Data that needs to be accessible even when the device is offline or has poor network connectivity can be stored in local storage.
Login State: Users can save their login details in local storage to stay logged in even if they close the browser.

This version is designed to be more conversational and engaging, making it easier to follow and understand.

Session storage

What is session storage?

Web developers can keep data on a user's device for a single browsing session thanks to the session storage. Session storage is only available till the session is present, this means it will erase all the data after user exits the website.

We can say that it creates a temporary storage object which is scoped to the current browsing context and is not shared between different browser tabs or windows.

How does session storage work?

The window is available to web applications when they need to store data in session storage. The sessionStorage object provides a key-value store interface, just like local storage. The web application may establish values for specific keys in session storage while the user is browsing; these values may later be retrieved and modified.

Here is an example of how data can be stored and retrieved using session storage:

    
            
    
// Store data in session storage
sessionStorage.setItem('username', 'Anom');
sessionStorage.setItem('LogIn', true);

// Retrieve data from session storage
const username = sessionStorage.getItem('Anom');
const LogIn = sessionStorage.getItem('LogIn');

// Remove data from local storage
sessionStorage.removeItem('Anom');

console.log(username); // "Anom"
console.log(LogIn); // "true"

Advantages

Pros of session storage	Details
Security	Data gets stored for the duration of the session and is automatically removed when the session ends. Thus, session storage is secure for storing private information like session IDs or authentication tokens.
Temporary	Data on browsing session is temporarily stored using session storage. This can assist in clearing up space and minimizing clutter in the user's browser.
Easy to use	Developers may easily implement and use session storage in their online apps because to its straightforward API, which is comparable to local storage.

Disadvantages

Cons of Session storage	Details
Limited storage	Depending on the browser, session storage normally has a storage limit of 5 to 10 MB. This indicates that it might not be appropriate for large-scale data storage.
Session dependent	The data is destroyed when the session ends because session storage depends on the active browsing session. User can face a difficulty while accessing the data in succeeding sections.
Not shared	The scope of session storage is the current browsing context; it is not shared throughout tabs or windows. Data sharing between components of the same application or other applications may become challenging as a result.

Use Cases

Here are some common scenarios where session storage is used:

Form Data: Session storage is ideal for storing data captured in web forms, such as user names, email addresses, phone numbers, or any other information the website owner requests.
User Preferences: Developers can use session storage to record user preferences, such as selected language, location, or time zone, to create a personalized experience for users.
Shopping Cart: Items added to a shopping cart can be saved in session storage, allowing users to add or remove items while navigating. When the user ends the browser session or completes a transaction, this data is removed.
Authentication Tokens: Session storage can save authentication tokens or session IDs, allowing users to remain logged into the web application. This data is cleared once the user signs out or closes the browser.
Game State: Session storage can hold data related to a user's game score, level, and progress, enabling them to resume their game from where they left off after closing the browser.

Monitor your users in real time and optimize your digital experience with Zipy!

Get Started for free

Cookies

What are cookies?

When a user accesses a website, a web server generates small text files known as cookies, and the user then keeps these data on their device. Cookies are used to track user behavior, remember user preferences, and deliver customized web experiences.

A key-value pair and an expiration date are both part of a cookie. The value, which contains details about the user or their activity on the website, can be retrieved using the key, a special identifier. Cookies have expiration dates before being uninstalled from a device automatically.

How do cookies work?

The user visits a website for the first time. The website's server sends a cookie to the user's browser, which is stored on the user's device.
The user interacts with the website, such as logging in or adding items to a shopping cart. The website may use the cookie to remember the user's preferences or to keep the user logged in during their browsing session.
When a user visits website again, cookies are send back by the browser where server receives the information and uses it to customize the user experience.

Advantages

Pros of cookies	Details
Personalization	Cookies are be used to remember user preferences, like language or theme, of the website. This enables developers create a more personalized experience for end users.
Convenience	Developers can use it to simplify how users interact with the websites by saving things like login information or the contents of the shopping cart.
Performance	Helps in increasing page performance through data caching and reducing server queries.
Analytics	Cookies keep a track of user behavior and gather data about how people use websites. This helps website owners improve user experience and optimize their sites.

Disadvantages

Cons of cookies	Details
Privacy	Without their consent, cookies can be used to track and profile people - possibly breaching their privacy.
Security	If cookies are used to store sensitive data or if unauthorized individuals gain access to them, it can pose a security concern.
User control	The amount of data that cookies gather may make some users uncomfortable, and they may decide to block or delete cookies.
Compatibility	Cookies might not function effectively in every browser or on every device, which could result in inconsistent user experiences.

Use cases

Advertising: Cookies can track user behavior and interests and hence can be use to displaying relevant ads to end users. This can boost conversion rate and make it easier for advertisers to connect with their target audience.
E-commerce: Cookies can record data related to login, shipping, and even items in shopping carts. Developers can use these informations to improve user experience and make the checkout process smoother.
Analytics: Cookies can track different kinds of data on your website, like user behavior, location, device, reference site, and more. Website owners can use this data can help them improve user experience and make business decisions.
Security: Cookies can prevent fraud and unauthorized access. It can store login credentials and authenticate the user when trying to log in. Cookies can also identify multiple login attempts from different locations or devices.
Integration of social media: Cookies are used by social media platforms to track user behavior and preferences. It makes a note of language, time zone, location, likes, shares, and even comments, to deliver a personalized and optimised user experience.

Local storage vs session storage vs cookies

This table represents how local storage, session storage, and cookies stack against each other.

Aspect	Local storage	Session storage	Cookies
Storage capacity	Upto 10 MB per domain	5-10 MB per session	Up to 4 KB per cookie
Data accessibility	Can only be viewed by the domain that created them	Can only be accessed by the domain that created them	Can be accessed by any domain that has access to the cookie i.e server and client.
Data expiration	Kept until it is deleted by the user or the website that created it	Automatically deleted when a person quits their browser or leaves a website.	You can set expiration time for a cookie. It varies from few hours or days, while others may set them to last for months or even years.
Data security	More secure than cookies as it is not transferred to the server with every request	More secure than cookies as it is not transferred to the server with every request, but still susceptible to XSS attacks	Susceptible to interception by hackers
Browser support	Supported by most modern browsers like Google Chrome (above version 4), Mozilla Firefox (above version 3.5), Apple Safari (above version 4), Microsoft Edge(above version 12) Internet Explorer(above version 8), Opera (above version 10.5).	Supported by modern browsers like Google Chrome (above version 5), Mozilla Firefox (above version 2), Apple Safari (above version 4), Microsoft Edge (above version 12), Internet Explorer (above version 8), Opera (above version 10.60).	Accepted by most modern browsers like Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, Internet Explorer, Opera.
Use Cases	Storing user preferences, caching data, and enabling offline functionality	Storing temporary data during a user session, such as data from a form or shopping cart	User authentication, tracking, and personalization

‍

Monitor your users in real time and optimize your digital experience with Zipy!

Get Started for free

Conclusion

Understanding the differences between local storage, session storage, and cookies is essential for building effective web applications. While cookies have been around since 1994, local storage and session storage were introduced with HTML5 in 2008. Both local storage and session storage offer more flexibility and greater storage capacity, making them suitable for a variety of use cases.

By choosing the right storage method, you can significantly improve the performance and user experience of your web application. So, next time you're developing a web app, remember the distinctions between local storage, session storage, and cookies to make the best use of browser storage.

That’s all for now. Happy coding!