Difference between local storage, session storage, and 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:

    

            Copy
    
// 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"

Advantages

Disadvantages

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:

    

            Copy
    
// 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

Disadvantages

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.

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?

1. 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.
2. 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.
3. 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

Disadvantages

Use cases

1. 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.
2. 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.
3. 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.
4. 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.
5. 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.

‍

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!