Something I was asked in an interview recently was what are cookies and local/session storage and what's the difference between them. I was also asked to further elaborate on when one would be more appropriate to use over the other and to provide an example. That's something I didn't really think about until that point and I got to thinking I'd like a more solid answer myself.
Today I'd like to do just that.
Cookies are the older of the bunch and were around before local and session storage were a thing. They are text files that contain data such as username/password and associate it with an ID that identifies you as a specific user to the server. They are used to personalize and tailor the users web browsing experience.
- They are the older format of a client storage solution.
- Can store up to 4KB Storage (the smallest of the bunch).
- Expiration must be set at creation.
- They are read on both the client/server sides.
- Can only store strings.
As far as I understand it cookies are somewhat outdated for client side storage. Now that doesn't make them useless they are still used server side quite frequently. So two use cases I could name would be:
- To develop a secure means of user identification between the client and the server.
- To be able to adjust or customize user experience due to the server being able to pass back relevant data based on the cookie.
- Has the highest storage capacity at 5/10 MB depending on the browser.
- Is only able to be read on the client-side.
- Reduces traffic between client/server and bandwidth due to it not having to pass the data back and forth each time.
- Has taken over a lot of the cookies duties client-side thanks to its much larger capacity and lack of expiration.
As mentioned previously local storage has taken over a lot of roles cookies used to perform client side. A couple major things local storage handles are:
- Storing data on the browser that isn't confidential for faster load times upon revisiting the site.
- Storing stuff such as previous searches, usernames, and form data.
Session storage is also part of the Web Storage API like local storage. It is used however for storing data not necessary for the long term and is deleted upon closing the tab or window.
- Has up to 5MB of storage.
- Session based data and will not persist on closing the window.
- Also used only client-side.
- Isn't supported on older browsers.
- Should also not store confidential data.
Session Storage is used just for that immediate session as it so aptly named. So you wouldn't store any confidential information in there and you wouldn't store things the user might need later in there. A couple use cases are:
- This could be used in the case of a user opening the same page on different tabs the data related to those pages would have to be separate.
- It could be used to maintain the current state of the interface so if a user were to toggle with the page it stays that way but upon exit and reentry the page layout is reset.
Now I covered the generals of the topic but there are many nuances and it depends entirely on your project how you decide to use these storage methods. I feel a little more confident differentiating the bunch at this point though and would be able to answer that interview question no hesitation next time. I hope you learned something along the way with me and as always.. happy coding!