Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What is Browser Storage?
3.
What is Web Storage?
4.
Local Storage
4.1.
Advantages
4.2.
Disadvantages
5.
Session Storage
6.
What Exactly is a Cookie
6.1.
Session Cookies
6.2.
Persistent Cookies
7.
Accessibility
8.
Difference Between Local Storage Session Storage and Cookies
9.
Frequently Asked Questions
9.1.
Is session storage secure?
9.2.
Is Async a sessionStorage?
9.3.
Which is better local storage or session storage?
9.4.
Is local storage permanent?
9.5.
What are cookies used for?
10.
Conclusion
Last Updated: Mar 27, 2024

What are Differences Between Cookie, Local Storage, and Session Storage

Author soham Medewar
0 upvote
Master Power BI using Netflix Data
Speaker
Ashwin Goyal
Product @
18 Jun, 2024 @ 01:30 PM

Introduction

Since HTML5 was introduced, we have had a variety of methods for caching or storing data on the client browser. This idea of client-side storage has been around for a while. Prior to the advent of local storage and session storage, we could only save data on browsers using cookies, which was quite limited due to their tiny size. Although they have been described previously, cookies are still utilized for a variety of things. Session IDs and access tokens, for example, are still utilized to store user customization and status information.

difference

As a result, modern online browsers provide us with a variety of choices for storing website data—also known as browser storage—on the users' browsers. This makes it possible to access the data anytime it is required. Additionally, this enables long-term data storage and a variety of other use cases, including the ability to save website content or documents for offline use, user preferences, and much more.

What is Browser Storage?

Although it operates on similar concepts to server-side storage, browser storage or client-side storage has various use cases. It is made up of JavaScript APIs that enable us to store data on the client (i.e., on the user's computer), where it may later be retrieved as needed.

Cookies, local storage, and session storage are the three methods that are most frequently used to save data locally on browsers. The fact that all three of these are saved on the user's browser is the key similarity between these three. This implies that if the user's data is saved in Chrome, it won't be accessible through other browsers like Firefox.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

What is Web Storage?

With HTML5, web storage options like Local Storage and Session Storage were introduced. This made storing and retrieving data in browsers much simpler.

Javascript could access web storage, and the server couldn't read any of this information unless it was manually included in the request.

HTML web storage offers two objects for data storage on the client:

  • Data is stored in local storage objects that have no expiration dates.
     
  • Data is stored for one session in a session storage object (data is lost when the browser tab is closed).

Local Storage

local storage

We can store data as key/value pairs in a web browser using the local storage web storage technique on the client's computer. Unless the user explicitly deletes it from the browser, the data is kept in local storage forever. Even if the user closes the window or tab, it remains valid. Instead, the information stays in the browser's memory up until and unless the memory is purged.

Only JavaScript and HTML5 can access the local storage information in the browser. To completely remove all local storage data, the user can also clean the browser's cache and data.

There are four ways to set, retrieve, remove and clear data from local storage:

  • To set the data in local storage, use the setItem() method. The parameters for this method are key and value. With this method, we can store value with a key. localStorage.setItem(key, value);
     
  •  We can use the getItem() method to access the data kept in local storage. The key whose value we need to retrieve is the sole parameter for this procedure. localStorage.getItem(key);
     
  • The removeItem() method, which is kept in memory with the key, allows us to delete the data. localStorage.removeItem(key);
     
  • All of the data kept in the local storage can be cleared using the clear() method.

Depending on our use case, there are advantages and disadvantages to using local storage.

Advantages

  • There is no expiration date for the data kept in local storage.
     
  • The storage limitation is approximately 10MB.
     
  • Data from local storage is never sent to the server.

Disadvantages

  • Since local storage data is in plain text, it is not designed to be secure.
     
  • Since the data type is restricted to strings, serialization is required.
     
  • Only the client side, not the server side, is capable of reading data.

Session Storage

session storage

The localStorage and the sessionStorage are extremely similar. However, the primary distinction is in how long information stays in the browser—until the current tab or session is active. The data stored in session storage is also deleted when you close the tab or end the session. Using the setItem() and getItem() methods, we can also set and get session data, just like we do with local storage. For instance:

sessionStorage.setItem(key, value);

sessioinStorage.getItem(key);

What Exactly is a Cookie

cookies

Prior to the introduction of HTML5, cookies were the sole option. Therefore, keeping data on the client machine through cookies is an antiquated method.

Cookies assist us in storing client-side data to provide website visitors with a customized experience. Cookies are transmitted to the server along with requests and returned back to the client in response; as a result, the server and client exchange cookie data with each request. The servers could deliver users tailored content using the cookie data.

The cookies can be created, changed, or read using JavaScript: document, just like web storage. Cookie. To mitigate a few security vulnerabilities like cross-site scripting, we have an HTTPOnly cookie flag that may be used to limit cookie access in JavaScript (the cookies are only available for servers to access).

Session cookies and persistent cookies are the two categories under which cookies fall.

Session Cookies

Session cookies are deleted when the browser is closed because they do not contain the attributes such as Expires or Max-Age.

Persistent Cookies

The Expires or Max-Age properties are specified for persistent cookies. These cookies will expire at a set date (Expires) or time rather than upon quitting the browser (Max-Age).

Accessibility

In terms of accessibility, local Storage could be accessible in any browser window or tab that was open for a website. However, since session storage is linked to a specific session and each tab has its own session, data that has been set for session storage is only accessible in the tab that is currently open. Last but not least, cookies resemble local storage in that they may be accessed from any window or tab. On the server, cookies might also be accessed. All the cookies are sent with each request to the backend server. As a result, they are also employed for jobs involving authentication.

Difference Between Local Storage Session Storage and Cookies

  Local Storage Session Storage Cookies
Capacity 10MB 5MB 4KB
Browsers HTML 5 HTML 5 HTML 5 / HTML 4
Accessibility Any Window Same Tab Any Window
Expiration Never On Tab Close Manually Set 
Browser Support Very High  Very High Very High
Supported Data Types String Only  String Only  String Only
Auto-expire Option No Yes Yes
Storage Location Browser Only Browser Only Browser and Server
Editable and Blockable by Users Yes Yes Yes
SSL Support No No Yes

Frequently Asked Questions

Is session storage secure?

XSS assaults can target both SessionStorage and LocalStorage. As a result, avoid saving private information in browser storage. When there are no sensitive data, using the browser's storage is advised.

Is Async a sessionStorage?

No, all localStorage calls are synchronous.

Which is better local storage or session storage?

If we want some data on the browser, we often utilize the local storage object. Cookies are used if we want them on the server, and session storage is used if we want to delete the data if the user closes that particular tab or the season.

Is local storage permanent?

The data stored locally is temporary. The user owns the storage; therefore, they are free to delete it if they so choose.

What are cookies used for?

Cookies are brief text messages that a website you visit sends to your browser. They assist the website in remembering information about your visit, which can both make it simpler for you to return to the site and increase its usefulness to you.

Conclusion

In this article, we have learned about local storage, session storage, and cookies. Also, we have seen the differences between all the three storages.

Refer to our Guided Path on Coding Ninjas Studio to upskill yourself in Data Structures and AlgorithmsCompetitive ProgrammingJavaScriptSystem DesignCompiler DesignAutomata Theory, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio!

Nevertheless, you may consider our paid courses to give your career an edge over others!

Happy Coding!

Live masterclass