Different Types of Browser Storage

In this article, we will cover the different types of browser storage and use case examples to grasp the pros and cons. In the end, you will be able to have a better knowledge of each type. So let us get started!

Following sections in this article:

1. Introduction
2. Types of Browser Storage
3. Conclusion

1. Introduction
Let's understand the general concept of Browser Storage or Web Storage.** Web Storage** also known as DOM storage (Document Object Model storage), facilitates web applications with different protocols for storing data. It is standardized by the World Wide Web Consortium (W3C) and WHATWG. All major browsers supports browser storage.

2. Types of Browser Storage
We will looked at different ways to store data in the browser:

• Cookies
• localStorage
• sessionStorage
• IndexedDB

Each are unique and useful in different circumstance and they each have different capabilities. In this section, we will explore more on each one and their different advantages and disadvantages.

i. Cookies
Cookies have existed since 1994 as little content documents put on a clients' PC by a site, and can be gotten to simply by the site that set it. Every way of the area can likewise be characterized by cookies. It's the exemplary method of putting away basic string information inside a record. Normally, cookies are sent from the server to the client, which would then be able to store it, and send it back to the server on ensuing solicitations. This can be utilized for things like overseeing account meetings and following client data.

Example of Cookie in operational mode:
Document. Cookie = "username = Jane Doe; expires = Thu, 18 Dec 2019 12:00:00 GMT; path = /" // set cookie
Document. Cookie = "username =; expires = Thu, 01 Jan 1970 00:00:00 GMT" // delete cookie

Pros

• They can be used for communication with the server
• We can set when we want the cookie to expire automatically, instead of having to manually delete

Cons

• Potential security issues

Cookies have basic support in all major browsers.

ii. Local Storage
LocalStorage is one kind of the Web Storage API. In localStorage the information on the client program remains for a lifetime except if the client erases or flush the localStorage information from its program, it doesn't make a difference if the client shuts the window or tab the information will stay in the program except if the program erases the memory of the program is cleared.

For example :

localStorage.setItem("Name", "Luffy"); var username = localStorage.getItem("Name"); document.write(username);

iii. Session Storage
SessionStorage is the second sort of the Web Storage API, In SessionStorage, the information is put away in the program's memory for that particular session. This means until you close the program window. In contrast to cookies, the information in sessionStorage is never moved to the sever while making an organization demand. The capacity furthest reaches of SessionStorage is additionally extremely high when contrasted with cookies.

Pros:

1. It is favored over cookies since it is considerably more natural than utilizing cookies to store things.
2. Less to and from to the server
3. A cookie is size restricted to 4kb and utilizing sessionStorage you can have substantially more information spared per session
4. Quicker page loads

Cons:

1. Just equipped for sparing strings
2. It's eradicated after the "session" or program is shut
3. Not secure enough to store usernames or passwords
4. The information isn't steady for example it will be lost once the window/tab is shut. Like localStorage, it deals with same-inception strategy. In this way, information put away may be accessible on a similar inception.

iv. IndexedDB
IndexedDB is a value-based information base framework, similar to a SQL-based RDBMS. In any case, dissimilar to SQL-based RDBMSes, which utilize fixed-segment tables, IndexedDB is a JavaScript-based article situated information base. IndexedDB allows you to store and recover objects that are ordered with a key; any articles upheld by the organized clone calculation can be put away. You need to indicate the information base pattern, open an association with your data set, and afterward recover and update information inside a progression of exchanges.
IndexedDB is essentially a basic level record information base with progressive key/esteem constancy and fundamental ordering.

Pro: If you're a NoSQL kind of individual, at that point this may possess all the necessary qualities consummately.

CON: Not yet accessible in most new programs.

CON: If you needed SQL, you're not getting it here. Despite the fact that later on, it very well may be an extraordinary structure block for executing a SQL motor for the program.

V. WebSQL
WebSQL is an API for a relational database on the client, similar to SQLite. Since 2010, the W3C Web Applications Working Group has ceased working on the specification. It is no longer a part of HTML specification, and should not be used.

A comparison
LocalStorage vs SessionStorage
LocalStorage get shared across browser windows and tabs. Picture that you have an application opened in various tabs and windows. In the event that you update the LocalStorage in one of those tabs/windows, every other tab/windows will see the refreshed LocalStorage information. Be that as it may, sessionStorage is free of different tabs or windows. In the event that two tabs are opened, and one updates the sessionStorage, it won't be pondered different tabs/windows. For instance, consider the situation that a client needs to book two lodgings through two program tabs. Since that requires separate meeting information, the SessionStorage is the ideal decision for the inn booking application.

3. Conclusion
We have looked in-depth at localStorage (along with its closely related cousin sessionStorage), cookies indexedDB and WebSQL. You should now have a better idea of the benefits and drawbacks of each.