My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more
Difference Between Web Storage Types

Difference Between Web Storage Types

Milecia's photo
Milecia
·Jul 11, 2019

There's no way around working with data. Which is why you need to know the difference between the storage options you have. Some data is only used once in a session and other times you'll need data to stick around regardless of what the user does. You don't have to store everything on the database either.

You have several ways you can save user data on their computer and we'll cover the three most commonly used ones. They are all pretty similar with the main difference being the cases when they are used.

Session Storage & Local Storage

These two aren't different enough to get their own sections. There is only one big difference between them, but let's talk about how they are similar first. Both session storage and local storage are a part of the Web Storage API. They let you store data locally on a user's computer so you don't always need to make server calls.

This is similar to how cookies work, but none of the data in session storage or local storage will ever be passed to the web server. You get a total of 10MB of space to work with by using both session and local storage which is way more than you get with cookies. When you want to save user settings or preferences, but you don't want them in your database, you can consider using one of these storage types.

Deciding whether to use session storage or local storage is usually an easy to do when you this difference. Session storage is exactly like local storage except it gets cleared when a user closes the window or tab they were using. Data in session storage doesn't stick around once the web page has been closed. On the other hand, local storage holds data until you remove it.

Local storage is used more for user settings or long-lasting user data because it only gets cleared when you tell it to. Session storage would be useful if you had an application that calculates a value and you want to hold those numbers temporarily because you know the user won't need them again once they have closed the tab.

Cookies

Cookies are different and they have gotten an unfair reputation lately. A cookie is similar to the web storage types because it's also just a snippet of text. The main difference is that cookies are sent to the web server with every request. That brings up potential security issues because someone could modify a cookie value and access the database if there aren't security measures in place.

The life of a cookie can be set by a developer. Without any expiration set, a cookie will be removed when you close the browser window. Otherwise, it'll stick around for as long as you have told it to. A cookie doesn't hold as much data as either of the web storage options so it's best used for smaller data storage and only for information that needs to get sent to the server in requests.

When you need to quickly use non-sensitive user information, one of these storage options will work well. By keeping certain values in the browser, you can speed up the performance of your application and make it more user friendly. Are there any other storage options I missed? Or have you seen these used in weird ways? I’m sure somebody has done some odd thing using one of these storage options and it made you laugh.


Don’t forget! I'm doing a live, free webinar on how to make a MERN stack application on July 21st! You'll learn how to get MongoDB up and running, how to connect the React front-end with an Express/Node back-end. It'll be a lot of fun and I promise you will definitely learn a lot. You can register for the webinar here Hope to see you there! 🙂