Modern browsers do much more than allowing a person to surf the internet. It can be used to open and manage multiple email IDs, download files from the web, in addition to making surfing easier and faster, interact with the website, synchronize with variants of the same web browser installed on your different devices, and whatnot.
Contemporary web browsers do much of the aforementioned using something called browser storage. In its simplest form, browser storage is data stored via a web browser. A variety of web technologies require storing data of some kind on the client-side i.e. the user side, such as cookies and IndexedDB, for varied reasons.
Typically, browser storage is meant to offer cache/offline mechanisms to websites and web apps. The way in which data is stored by a browser forms the basis of various types of browser storage.
Types of Browser Storage
In this write-up, we will focus on the various types of browser storage in-use today. Hence, we won’t be talking about the now-retired Web SQL, which offered users a way to store data in a web browser using SQL queries.
1. Local/Persistent Storage
Stored in the form of simple key-value (K, V) pairs. Data stored by means of the local storage persists even after the browser is closed i.e. it is meant for long-term storage. It is accessible to all the pages of the domain. This can include heavy images and snippets of media files.
Local storage is evicted only when the user chooses to do so. In Firefox, for instance, you can choose to delete entire or some select stored data by navigating to Preferences and using options labeled under the Privacy & Security -> Cookies & Site Data section.
Many web browsers generate some kind of popup/notification when the local storage/persistent storage is used. No such message is usually generated when temporary/session storage is used that we will discuss next.
2. Session/Temporary Storage
Local only to one URL and one browser session. Data stored as session storage is lost as soon as the web browser or the concerned browser tab is closed i.e. it isn’t meant for long-term storage.
When storage limits are reached, data stored in session storage is evicted by means of an LRU (Least Recently Used) policy.
Once the session storage exceeds the specified limit, which is different for different web browsers, the deletion process starts with the least recently used data, followed by subsequent old data, up until the session storage is no longer exceeding the specified limit.
A cookie, or HTTP cookie, is a small amount of data sent from the concerned website in order to store the same on the user’s system while the user is on that particular website. Cookies are usually used for:
- Personalization – Remembering user preferences, such as login details, items in a shopping cart, and settings preferences.
- Session management – Improving page load times.
- Tracking – Fetching user’s web browsing habits i.e. what webpages the user has visited, the sequence of the same, and the time period for each visit.
An HTTP cookie is also termed as a browser cookie, internet cookie, or web cookie. Cookies are of various types, as described follows:
- HTTP-only Cookies – Made by adding the HttpOnly flag to the cookie. Such a cookie can’t be accessed by client-side APIs.
- Secure Cookies – Ordinary cookies are made secure cookies by merely adding the Secure flag to them. Secure cookies can be transmitted only over an encrypted connection i.e. HTTPS.
- Persistent Cookies – Unlike session cookies, persistent cookies have a specific expiration date or time period. For their entire lifetime, information is transmitted to the server each time a user visits the concerning website or views a resource belonging to the source website.
- Same-Site Cookies – These are cookies with the SameSite attribute, introduced by the 2016 Google Chrome version 51.
- Session Cookies (a.k.a. In-memory Cookies/Non-persistent Cookies/Transient Cookies) – Exists until the user navigates the respective website. They don’t have an expiration date associated with them and are deleted as soon as the browser window with the concerned website or the web browser is closed.
- Supercookies – Ordinary cookies have the origin of a specific domain name. Supercookies, on the contrary, have an origin of a top-level domain or a public suffix.
- Third-party Cookies – These are often used by advertisers to serve appropriate ad content to users. Third-party cookies belong to a website other than the one on which they are implemented.
- Zombie Cookies – Such cookies are automatically recreated once deleted. As soon as the absence of a zombie cookie is detected, it is recreated using the cookie content stored in one of the many locations, such as a flash local shared object or HTML5 web storage.
4. HTML5 Web Storage (a.k.a. DOM Storage)
The HTML5 specifications introduced the world to web storage, which offers persistent data storage. Although similar to cookies, web storage is much more capable both in ability and capacity. It offers better programmatic interface than cookies and is of two types:
- Local storage
- Session storage
Different web browsers impose different limits on web storage size on a per origin (website) basis. It is 5 Mb for Mozilla Firefox and 10 Mb each for Google Chrome and Internet Explorer.
IndexedDB is an alternative to the web storage standard. Unlike web storage that is size-limited per website, IndexedDB can offer larger storage capacities. Although primarily intended for caching certain web app data for offline viewing, IndexedDB can also be used for storage by some browser modules.
That sums up the different types of browser storage. Storing data has become an important aspect of web browsers in this data-centric age.
Just like web browsers themselves, web storage is subjected to modifications and alterations with time, making it much simpler to use and powerful to implement.
You might be interested in: