Cookies vs Session vs Local storage

Hello everyone, we will be quickly overviewing the three main ways to store data within ones browser which are session storage, local storage, and cookies. Lets look at the similarities and differences and when to use which ones.

The first key similarity is that all three of these properties are stored on the client-side or on the user's browser and only on that users browser. Cookies, Local Storage, and Session storage are not available on another browser within the same computer making them browser independent. They are meant to exchange information between the browser and the server. The information that is contained on them is most usually previous interactions or specifications that are specific to a user. Local storage and Session storage can be considered in the same category as they are both very similar in how they interact and only differ in a few instances. Cookies behave almost completely different than the other two and have also been around longer.

Image by FreeCodeCamp

Capacities

One way that cookies defer from local and session storage is the capacity size. cookies can store only a much smaller amount of information; the capacity for cookies is 4 Kb for most browsers while local storage and session storage can hold 10 Mb and 5 Mb respectively. This means that cookies are going to be much smaller than local storage and session storage but thats okay for their use cases.

Browser Support

Cookies are supported in older browsers which support HTML 4 because theyre been around for much longer but thats not really something you have to worry about because HTML 5 is in pretty much any browser being used now.

Accessibility

Cookies and local storage are available for any window inside the browser so if you have Google Chrome open on one tab or another tab the cookies are going to be available on all the different tabs that you have open to that website while for example, section storage is only available in the single tab that you have open that you set it in so it wont be available if they open another tab and go to your website.

Expiration

This is where local storage and session storage really differ from each other.

session storage is for that one browsing session which is why its called session storage. It is removed as soon as the user closes the tab where that session was set, whereas local storage is around forever until the user ends up deleting it or the code for the website is programmed to delete it after a certain action.

As for cookies, the expiration date is declared when it is sent to the client and it is the developer who sets the expiration which is always declared on a cookie. An expiration date is usually set to very far in the future, with the intention that it stays on the browser forever. Usually, the date for those is December 31 9999, which is the furthest date allowed to be set, so be aware that any cookies you may have on your browser could likely expire on new years day in the year 10,000. Another reason that warrants an expiration on a cookie is when a user has performed a certain action or has done something in a certain timeframe. One example of this is the monthly free article limitations that are placed on online news websites like the Wall Street Journal.

However, cookies can also not have an expiration property specified. A cookie with no expiration date specified will expire when the browser is closed, similar to the expiration of session storage. This type of cookie is known as session cookies because they are removed after the browsers session ends. One main usage of session cookies is to allow visitors to be recognized or authenticated as they visit from page to page on the website itself. Another usage of the session cookies functionality is the shopping cart feature on e-commerce sites where the cart is populated with your items as you go from page to page on the site.

Storage Location

As for storage location local storage and session storage are both on the browser like I said earlier but cookies while they are stored in the browser they are sent to this server every time a user requests something from the server. Whether its an image, HTML file, CSS file, or anything that is sent as the server response, the cookies get sent along with the clients request. This is why they have a much smaller capacity. Because all the information in the cookies gets sent to the server, if you have a lot of cookies that are really large, it will slow down your requests to the server and the responses that it sends back. Although the maximum size of a cookie is only 4KB, one can imagine the amount of data that is being sent through cookies when considering large scale applications where servers are handling tens of thousands of requests at a given second.

This is why best practice dictates that the cookies that are sent back and forward are as small and as limited as possible so you dont slow down the request any more than needed

Cookies are also really helpful for doing certain authentication-related tasks and they get sent to the server from the browser in the HTTP headers, unlike local storage or session storage which are just accessed by the application as client-side data storage.

In summary, if you are going to be storing something in the users browser youre almost always going to want to use local storage or session storage depending on how long you want it to live on the client-side. Whether you want it to be for one session (session storage) or if you want it to live after they close the browser (local storage).