Browser Storage In detail – part 1

Every web developer needs to understand the in and out of browser storage because this is the prerequisite for making a website and knowing how it works behind the scene.

It is hard to imagine a website without any storage as every modern website, be it a social website or a big e-commerce website, or just a plain blog static website needs to store something, hence this topic becomes more critical to understand.

There are a few important keywords coming in the article at multiple places. So, please follow the below definition for those terms –

1. Session – session is a browser tab, which is alive if the tab is open and dead when it is closed.

2. Static website – a website that has the static hardcoded content which doesn’t change much

3. Dynamic website – a website where the content of the website is coming dynamically

4. Client – a client is a machine that makes the request (from the browser) to the server for some resources

5. Server – a server is also a machine that serves the client request

---

Why do we need browser storage?

One question that would be popping be in your mind is why do we need to store anything. The reason for storage are –

1. Data Persistence
2. Authentication
3. To speed up the application
4. Accessibility with low network

Data persistence

Sometimes we want to persist some data throughout the session or even when the session ends in the storage for example user state or user-id in a session.

Based on the user-id in the session storage, we can say whether the user is logged in or not.

Most of the applications might be built on the logic when the user hits the login button then post login you keep the user-id from the response in the session storage.

Now, if the user refreshes the tab, you still want to be logged in, and that will be achieved through the user-id.

Keeping the user-id in the session is not a problem unless it’s been validated on the backend with each Node or service API request. If the user-id has tampered i.e not correct service APIs can log out the user.

This is just one use case, there are many where we may require storage for Data persistence.

Authentication

Suppose you are building a simple application that supports login. To implement it,

Store the email and password in the local store and if matches allow the user to log in.

Thus, storage is helpful in the authentication.

Speed up the application

Storing the images and videos or a big API response will speed up the website as it won’t go again to download the image or video or make the API call for the same response again.

Many companies use the above to save the extra second that costs for the resources which can be stored.

Accessibility with offline/low Network

As most of the places on the planet earth are still with low internet or offline mostly, to target those users, companies are trying to serve their website even in offline mode.

And it is possible using the service workers, cache storage, and IndexedDB. I’ll try to write one tutorial that will cover the above later.

Now it should be clear why we need the storage.

---

Before we dive into the client-side storage, we need to revisit the definition of static and dynamic websites –

Dynamic Website

Here, the client makes the request to the server for the data to be placed inside the HTML, once the server gives the data to the client this HTML file gets served.

The data is stored in the server using some kind of database (i.e server-side storage) and the server with the help of some server-side code, fetches the data and sends it to the client.

As data is dynamic and website depends on it, it is known as dynamic websites.

Static website (using Browser storage behind the scene)

Everything is the same as a dynamic website except the data is stored in the browser (client-side storage i.e browser storage) through Javascript API. With the help of these Javascript APIs data could be fetched whenever needed.

In most cases, both the storage client-side and server-side are used together.

Note :-

1. There is a size limit on the client-side storage though, it depends on the browser and user settings but approx. 5MB is the limit on the local storage.

2. It is advisable to not store the sensitive data in the client-side storage because they are less secure and could be easily manipulated.

---

Conclusion

This is where the first part concludes. Please wait for the next part, stay tuned!

If interested in building an application please read How to Build a Quote Generator using Javascript

Please follow me on – medium.com also for more articles!