LocalStorage and You
One of the most powerful tools we’ve encountered over our path through web development history is localStorage. I thought cookies were important, they are and cookies are still in use, but cookies are antiquated, relics of the past web. Storage isn’t a tool that is part of every browser so cookies still have a reason to exist as universal compatibility. LocalStorage has been around since 2009, but this is javascript, where Model T’s and Teslas can share the same highway and should be accommodated for. LocalStorage possesses most of the benefits of a cookie without needing to constantly be passed back and forth between the client and the server. This blog post will detail some of the backstory of localStorage and a comparison between it and cookies.
To describe localStorage, we must first look at the implementation of Storage. Storage used to be referred to as “DOM Storage”, though it is more common to find it now titled as “Web Storage”, as this is a more accurate description of what the storage is accomplishing. Web Storage itself is split into localStorage and sessionStorage. LocalStorage persists beyond a session while sessionStorage is wiped when the browser is closed. LocalStorage is the most common form of Web Storage so I will be referring to localStorage from here on out. LocalStorage is a function of the Window object, and was first implemented in Firefox 3.5 in 2009.
Why is localStorage more useful than cookies? There are plenty of reasons. Right of the bat, localStorage has a dedicated 5 mb storage space. Cookies have a max size of 4 kb. They aren’t even comparable though you’d be hard pressed to use 5 mb of space in localStorage. Cookies must be passed back and forth and modified constantly between the client and server. LocalStorage can be sent once by the server and then it will only be used by the client as a security clearance pass. The main use for localStorage and cookies is authentication, and the ways we can handle authentication in localStorage is more eloquent than cookies.
After logging into a website using localStorage authentication, you can check your localStorage through the javascript console, you will likely see something like this
We can see that in the Storage object, there is a key pair of jwt_token and some mumbo jumbo. During your initial login, the server sends the token to the client. After that, the client does not need to worry about authentication as the jwt_token acts as a security pass for the rest of the site. You can refresh or close the browser, and your session still persists because of the jwt_token within localStorage. JWT tokens are a popular form of encryption for authentication, this JWT token when decrypted is converted to user_id: 1. Because the server does not need to constantly send authentication to the client, it is much harder to counterfeit. Cookies themselves can also be easily intercepted if you’re on an open wifi for example.
It’s funny, the way I define a “session” is directly affected by the way we can now handle authentication with localStorage. Before localStorage, I guess session was created by the server and sustained by handing off the cookie between server and client. The way I view a session is from when you login to whenever you logout, whether thats 5 minutes or 5 weeks.
Sources:
