Cookies vs Local Storage vs Session Storage

 

Why should we store data in the browser?

One of the key reasons to store data in the browser is performance. You can’t always wait for the server to send a response for every request. Sometimes it’s better to have some piece of information stored in your browser for quicker access. So basically, there are 3 ways to store data locally in the browser — Cookies, Local Storage and Session Storage.

Cookies

Cookies are the oldest and most common way of storing data. A cookie is basically some text-based information. It is usually set by a server, nevertheless it can also be set in the browser. The working is simple, each time a request is made from the browser, the browser automatically attaches the cookie along with it. Now the server receives the information that was set in the browser.

We can set an expiration time for the cookie that is being set. There’s only 4KB storage space allowed for the entire cookie data. Cookies are advantageous as they work in older browsers as well. A cookie can be accessible to every window in the browser.

If you want to set a cookie manually using your browser, you can type this piece of code in your browser dev console where number is the key and 7 is the value and then have a look at your Applications tab under Cookies to check if it set or not.

document.cookie="number=7"

Cookie being set

Common Use Cases

• Authenticating logged in users — Whenever the user successfully signs in, the server sends a success response and also sets a cookie, so that whenever requests are sent in the future, the server recognizes that the user is signed in.
• Identifying user state — For example in an e-commerce site, whenever the user adds a new item and refreshes the page, it automatically shows up the added item in the cart, with the help of cookies.

Web Storage

In HTML5 Web Storage such as Local Storage and Session storage were introduced. So, what has changed? The idea behind introducing these is to make storing and retrieving values easier on the client side. The data in these storages are generally stored in key-value pairs. One particular improvement was that the size of the storage was much better than cookies.

You can access the Web Storage values using Javascript. None of this data can be read by the server unlike the cookies, unless we manually pass them along with the request. In other words, you can consider this Web Storage as your small personal database present in your browser.

Local Storage and Session Storage have a lot of things in common, with only a few dissimilarities. Let’s have a look at both:

Local Storage

The Local Storage is a type of Web storage which like cookies is accessible on all windows in the browser. When it comes to the storage capacity, it can store upto 5–10 MB, which is much better when compared to cookies. And the values set in local storage never expires until and unless we manually remove them.

On your browser console use these commands to set, get, remove and clear Local Storage values.

localStorage.setItem('key', 'value'); // to set a value to storelocalStorage.getItem('key'); // to get a value from storelocalStorage.removeItem('key'); // to remove key from storelocalStorage.clear(); // to remove all values from store

Session Storage

The Session Storage has a lot of similarities to Local Storage, but the storage size is limited to 5MB. Also, the values stored gets automatically removed from the browser when you close the active tab. As the name suggests, the values are only available for that session.

On your browser console use these commands to set, get, remove and clear Session Storage values.

sessionStorage.setItem('key', 'value'); // to set a value to storesessionStorage.getItem('key'); // to get a value from storesessionStorage.removeItem('key'); // to remove key from storesessionStorage.clear(); // to remove all values from store

Values set using local storage

Common Use Cases

• An application’s light mode/dark mode can be stored here in the browser.
• Likewise you can store the web application’s user customized data here. Say, choosing themes, layouts, etc.

Comparison

Image source: https://wpreset.com/localstorage-sessionstorage-cookies-detailed-comparison/

Which one should you choose?

The answer to this depends on what is your exact use case. If you want your page to always hold some data that is not confidential, then you can use localStorage. If the server needs to know some information like authentication key, you should use cookies to store them. sessionStorage can be used to store the state of interface, i.e., whenever you visit a page, customize it, visit another page and return to the same page, you would want to show the page how the user customized it. That’s a good use case for sessionStorage.

Conclusion

By now, I believe you know how each of these storages work and how they differ. I hope you’ll be putting this knowledge to use, when you are building your own application.

Thanks for reading! Happy coding!