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.
Hey! You should follow me on Twitter because reasons: https://twitter.com/FlippedCoding
Top comments (6)
IndexedDB ?
I always view cookies as existing for the benefit of the server, not the client, since it gets passed with every request.
IndexedDB is perhaps the most exciting storage option, and it has many advantages over LocalStorage in terms of storage space, object typing, asynchronous access...the point is, check it out!
Local storage is not recommended for saving authentication tokens. Cookies have the advantage of setting the 'httponly' flag, which means client side code cannot access the value. This can help mitigate the risk of some XSS attacks.
Some more information:
auth0.com/docs/security/store-tokens
owasp.org/index.php/HttpOnly
nice
JSON web token?
The Web Storage API is easy to access, but how do you start baking cookies? Any good tutorials you would recommend?