Local Storage, Session Storage and Cookies

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

What it is:

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.
• Older browsers still support the use of cookies.
• Can only store strings.

When you might use it:

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:

1. To develop a secure means of user identification between the client and the server.
2. To be able to adjust or customize user experience due to the server being able to pass back relevant data based on the cookie.

Local Storage

What it is:

Local Storage is part of the Web Storage API and is a type of web storage that works with JavaScript to store strings of data in the browser even after the browser has been closed out. It is the more modern approach to client-side storage and has been adopted by almost all modern browsers.

• Data has no expiration date and is cleared out only via JavaScript or by clearing out cache/local storage manually.
• 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.

When to use it:

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:

1. Storing data on the browser that isn't confidential for faster load times upon revisiting the site.
2. Storing stuff such as previous searches, usernames, and form data.

Session Storage

What it is:

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.

When to use it:

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:

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

Wrap Up

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!