Since we started using HTML5, we have been provided with various options to cache or store info on the client browser. This concept of storage on the client-side has been around for a long time. Earlier, we only used cookies to store data on browsers, and it was very restrictive as the size of the cookies was very small, but now we also have local storage and session storage. Although cookies have been discussed in the past, they are still being used for several purposes. They are still used to store user personalization and state data, e.g., session IDs and access tokens.
Hence, in modern web browsers, we are offered various options by which we store the website’s data on the user’s browsers, also known as browser storage. This allows the data to be retrieved whenever needed. This further allows keeping the data for long-term storage and various other use cases such as saving the website's content or documents for offline use, user preferences, and much more.
A critical part in order to run stateful containers. Kubernetes is an open source system for automating deployment and management of containerized applications. Click to explore about, Persistent Storage Strategies
What is Browser Storage?
There are a few ways by which we can store the data locally on our browsers, and the three popular ways are cookies, local storage, and session storage. There is one main similarity between the three, and that is all three of these are stored on the user’s browser. This means that if the user’s data is stored in Chrome, then that data will not be visible in other browsers such as Firefox. So basically, there are a number of ways provided by modern browsers to store data on the client-side and could be retrieved when necessary.
Why should we store data in the browser?
There are several reasons why many of the websites and apps we come across store some data locally in the browser. The major reason associated with browser storage is performance. The data stored locally in the user's browser is instantaneously available, and on the other hand, the remotely stored data is sent from the server to the user. Since the server response takes some time after a request is made for the data, we cannot always wait for it, so sometimes. It is beneficial to store the data in the browser for quicker access.
This implies that if the website relies on any data for the information to be accessed frequently, we can store it locally. This information could have many distinct uses such as:
Persisting data from a previous browsing session like your username, storing the contents of a shopping cart from the previous session, items in a ToDo list, remembering if a user was previously logged in, etc.
Personalization of the site settings/preferences that affect how your page renders
Settings like the user’s choice of color scheme, font size, whether some UI elements are visible or not.
Saving data and assets you want to keep handy if the network connection goes offline or for the site to load quicker.
Data for tracking or analysis that needs to be updated frequently.
Web storage such as Local Storage and Session storage were introduced with HTML5. This made storing and retrieving data in browsers much easier, and one of the major improvements made with these in client-side storage was the storage size, which is much better than cookies.
There are two objects for data storage on the client provided by HTML web storage:
Local storage object - stores data with no expiration date
Session storage object - stores data for one session (data is lost when the browser tab is closed)
Local Storage is a web storage method that helps us store data on the client’s computer in the form of key/value pairs in a web browser. The data is stored in local storage for a lifetime unless the user manually deletes it from the browser. It does not expire even when the user closes the window or tab. Instead, the data remains in the browser until and unless the browser's memory is cleared.
Local storage has four methods that we can use to set, retrieve, remove and clear:
We can use the setItem() method to set the data in local storage. This method takes two parameters, i.e., key and value. With this method, we can store value with a key. localStorage.setItem(key, value);
To retrieve the data stored in local storage, we can use the getItem() method. This method takes only one parameter, i.e., the key whose value we need to access. localStorage.getItem(key);
We can remove the data with the help of the removeItem() method, which is stored in memory about the key. localStorage.removeItem(key);
The clear() method is used to clear all the data stored in the local storage.
The local store has pros and cons to using local storage based on our use case.
The data stored in local storage has no expiration date
The storage limit is about 10MB
Local storage data is never transferred to the server
Local storage data is plain text; hence it is not secure by design
The data type is limited to string; hence it needs to be serialized
Data can only be read on the client-side, not on the server-side
The sessionStorage is very similar to the localStorage. Still, the main difference lies in the lifespan as it persists in the browser until its current tab or session is on. Once you close the tab or terminate the session, the data on session storage also gets lost. We can also set and retrieve session data using setItem() and getItem() methods, respectively, similar to the local storage methods. For example:
CSI stands for Container Storage Interface. It is an initiative to combine the storage interface of Container Orchestrator Systems such as Mesos, Kubernetes, Docker Swarm, etc. Click to explore about, Container Storage Interface for Kubernetes
What exactly is a cookie?
The only option that was available before HTML5 was introduced was cookies. So, storing data with cookies is a legacy approach to storing data on the client machine. Cookies help us store the client-side data to enable a personalized experience for the website’s users. Cookies are sent with requests to the server and are sent to the client on response; hence the cookies data is exchanged with the server on every request. The servers could use the cookie data to send personalized content to users.
Cookies are categorized into two types: session cookies and persistent cookies.
Session cookies do not specify the attributes such as Expires or Max-Age and hence are removed when the browser is closed.
Persistent cookies specify the Expires or Max-Age attributes. These cookies do not expire on closing the browser but will expire at a specific date (Expires) or length of time (Max-Age).
Which should we use: Comparison and use cases
There are many use cases of browser storage methods, i.e., local storage, session storage, and cookies. The most common use cases of browser storage are:
Personalizing site preferences
Persisting site activities
Storing the login state
Saving data locally so that the website will be quicker to download or use without a network connection
Improving website performance
Reducing back-end server requests
The browser storage methods could be differentiated based on three main parameters - storage limit, accessibility, and expiration.
Each browser storage method, i.e., local storage, session storage, and cookies, has a specific maximum data size. Local storage and session storage both provide a large memory capacity. To be more specific, local Storage stores up to 10 megabytes and session storage stores up to 5 megabytes. On the other hand, cookies provide a very restrictive and small storage capacity of 4 kilobytes. So we cannot store large amounts of information in cookies.
From the accessibility perspective, local Storage could be accessed in any window or tab open on the browser for a website. But if we talk about session storage, since session storage is tied to the particular session and each tab has its session, data is only available in the current tab in which we’ve set the session storage data. Lastly, cookies are somewhat similar to local storage as they are accessible from any window or tab. Cookies could also be accessed on the server. Whenever we request the back-end server, all the cookies are also sent along. So they are also used for tasks related to authentication.
Local Storage data never expires until you manually remove it, so in that sense, it could be very useful. The session storage data expires as soon as we close the tab because data is only available to a particular session and is equivalent to a tab. Cookies are unique as we can manually set the expiration date for them.
HTML 4 / HTML 5
On tab close
Supported data types
Browser and server
Sent with requests
Editable and Blockable by users
There are multiple options available for storing data on a user’s browser to select any of the browser storage options based on our use case. The most commonly used options are local storage, session storage, and cookies. Although cookies have been around for a long time, they can still be used to store the minimal data required by the server to identify the state. The other two options, i.e., local and session storage, also known as web storage, are used in many cases. One downfall of using web storage is that Local storage and session storage APIs are synchronous; hence they could impact the rendering of the UI, but it’s easy to enable the API into the web app.