Local storage, session storage, and cookies. These are three similar yet different ways data can be stored on a browser to be used at a later stage. For example, if you run a website that contains a quiz with several questions, you may want the browser to remember some of the questions that the user answers early on if they are required for a calculation at the end of the quiz. You could keep the user's answers in any of these types of storage, but there may be a reason why one is more appropriate than the other.
But before we get all theoretical, where can I find local storage, session storage, and cookies? The answer lies in your browser developer tools. Open up the dev tools and select "Application". In the frame on the left, you will be able to find the three storage types we are discussing.
Understanding Cookies
If you know barely know anything about what cookies are, I recommend first reading the following blog posts in this order:
If you just want to progress with this article, the tldr; on cookies is that HTTP (or HTTPS) cookies are pieces of data stored in a browser that can be used to measure user behavior as well as to save user settings and preferences.
HTTP is a stateless protocol. That is to say, the information involved in a server request and response does not persist in a subsequent request and response. To persist data across multiple requests, cookies can be used. As a practical example, we can look at cookie-based web authentication. When you log in to a website that authenticates with cookies, the web server will leave a cookie 🍪 in your browser. With each following HTTP request, the web server will receive the cookie back from the browser to ensure the requests are coming from the same user, authenticating that user and granting access to data designated for that user.
In another example, let's say that someone clicks on an ad and is directed to a website. You may notice that there are query parameters on the URL, similar to this structure:
https://websitexample.com?utm_source=adplatform
The part of the URL above that says "utm_source=adplatform" would typically be saved in your browser in a cookie by the ad server so that throughout your user journey the cookie persists the "utm_source" data even though multiple subsequent server requests are made as your move around the site. Without the cookie, the "utm_source" data would be forgotten in a condition of statelessness (and conversions may not be credited to the advertisement).
It's through this mechanism of saving data in cookies that websites can be 'stateful' and remember things like the items you left in a shopping cart or whether or not you like to experience a website in dark mode.
Cookies are involved in data exchange when HTTP requests take place. When a cookie is set in your browser, it may not stay in your browser forever. Different expiration dates can be set, and when they aren't, the cookies will only last for a browser session. In comparison to local storage and session storage, cookies are also more limited in the amount of data that can be stored (4 kilobytes).
We'll get more hands-on in another post where we'll cover how you can create a cookie and use it for your purposes in web analytics. Now, let's move on to discussing local storage.
Local Storage
Local storage is another type of storage that can take place in your browser. Like a cookie, you can use it for storing information and persisting it throughout a user journey. For example, if I have a website with a quiz, I might want to see every selection a user makes in that quiz. I could store it in the user's local storage and use that data at a later step.
While cookies involve sending data between the server and the client on each HTTP request, local storage is not. By nature, it is used only for storing data on the client side. In addition, unlike cookies, there isn't any expiration date. Data can therefore be kept on local storage indefinitely until it is actively purged. It can also store more data - up to five megabytes (some browsers allow you to adjust this).
Session Storage
Session storage is similar to local storage in that it is not involved in sending data on every HTTP request. Like local storage, data storage is only on the client side. But as its name suggests, session storage only lasts the duration of a browser session. When someone closes the browser, all the data in session storage is cleared. Like local storage, there's a 5MB limit on most browsers but it varies. Session storage can be useful for data you might only need to persist and use during a single user session. The fact that it clears at the end of a session means that data stored there is less vulnerable to breaches. In addition, it is more resourceful of storage space since space is only used for a session.
Going Forward...
In future posts, we will demonstrate how we can use these three different types of storage in the context of web analytics. We will discuss when to use which kind of storage and what the best practices are. Stay tuned!