DEV Community

Dawn Cronin
Dawn Cronin

Posted on

Intro to Browser Storage

Before getting into web development, I had a limited understanding of cookies. I knew that websites stored data about me as cookies, and used that data to customize my user experience. I also knew that when I cleared my cookies, websites forgot this information.

Then I learned that there was also local storage and session storage, both of which can store data as well.

What was with all these different storage types?

To start, let's talk about cookies! Before localStorage or sessionStorage even existed on browsers, there were Cookies. Cookies were designed for browsers to store stateful information on the user's computer. Stateful information might be a cart on an online store, or information about the current user. Cookies are sent in the head of an HTTP request to a given site's sever. If you have previously logged into a site, then the cookies for that site will have information about your account. The server will use this information to tell if you have a valid session. Since cookies are site specific, this works most of the time at protecting your data.

Cookies can also be used to keep track of your browsing data by third party companies, which is why it can have a bad reputation in the news. This allows for targeted ads based on your browsing history.

In 2012, most major browsers added localStorage as an option for sites to save information on a users computer. Since the cookies were sent in every HTTP request, it was often slowing down the response times. LocalStorage is only accessible by the client and is not sent in the request to the server. Since this data isn't part of the request, it changes how user sessions need to be saved. Rather than storing user sessions data in a database, a JWT can be used and placed in local storage.

JWT, or a JSON Web Token, is a standard way to pass JSON data over the web. It is encoded, and can include information about the user that is logged in and their permissions. The JWT does not need to be saved server-side, since it can decode the token to find the user information.

SessionStorage is similar to localStorage, but it is deleted after each page session. This might hold information that is specific to interactions you've made during a single website visit.

If you are considering using localStorage or Cookies to store user data, there are trade offs to both on the security side as well. Additionally, how you set up your server will vary greatly on how to you want to save user sessions. I will do another post on how to implement both on Rails. I hope this clears up some confusion!

Top comments (0)