Cookies, Sessions, and LocalStorage are all methods of storing data client-side, and specifically on the user's browser. Why do we have so many different versions? Do I need to know them all?? They are all super similar, but do have key differences that make them useful for different purposes. It's important that you understand the benefits and limitations of each so that you can choose which is most appropriate to use for any given application.
Cookies are a much older concept than either Sessions or LocalStorage, and are also much more limited in size. This is because the entirety of a cookie is actually passed back to the server with each request. You can see why you need to keep them small!
LocalStorage and Sessions are much closer to each other than either is to Cookies. They use similar setting and access methods, and can store similar sizes of information. In fact, there's really just one big thing that distinguishes them from each other: Sessions data is isolated to the current tab or window. As soon as you close that tab or window, the information goes away. This is why it's referred to as "Sessions." LocalStorage data, on the other hand, will persist across multiple windows and tabs of the same browser (as will cookies).
We saw above that Session data persists so long as you have that "session" open. LocalStorage will persist indefinitely, until the user or the program deletes it. Cookies have an expiration set by the code. They can be set to expire anywhere from just a few seconds or minutes down the line to a date so far in the future that it is essentially indefinite (such as the year 9999).
So to sum up:
Consider these differences when implementing any kind of browser storage. Cookies are great for password tokens when you want a user to be logged out after a period of inactivity, for instance, while localStorage is good when you want a user's password and username info to stay put, allowing them to be automatically logged in on every visit. Sessions are good if having multiple pages of the same content up might mess with the running of your program.
How to actually set and access all these methods are really quite simple, but not something I'm going to go over here. This video lays the high level basics out pretty clearly.
Hopefully this serves as a clear and concise resource for someone!
EDIT: Also worth noting are the varied security risks. It's not a good idea to use Local Storage for sensitive info such as user passwords, for instance, since it's vulnerable to xss attacks.
Top comments (11)
Also probably worth noting that localstorage probably shouldn’t be used for sensitive information (like user passwords session identifies, etc) as it’s susceptible to xss attacks.
What do you think about firebase auth being in
localStorageby default?Although can be set in cookies as well. I tried, but I failed...
Hmm ideally you don’t wanna be putting any sensitive data in local storage as its openly accessible via JS. What problems did you have with configuring your session via cookies?
csrfTokenfrom the server? Another HTTPS request, or just js-cookie? There is no form or template rendering here...Encryt both fields to jwt and set it in cookie-session.
May help a bit
dev.to/dpkahuja/learn-and-build-we...
Good point, I'll make an update.
Maybe the size difference could be a part of the comparison table, as in some cases it might be the key factor in one's decision.
Really informative!
I recently had to use localStorage for a voting app I'm working on in .NET
You forgot to add if we use SSR we don’t have an access to the local storage :-( but we can still use cookies
What is a good example for using local storage?