Web Applications: Common Data Storage Options.

Web development has evolved over the years. We have move from writing just plain websites (mixture of Html, CSS and some Javasript) to display static content to writing full blown Web applications with dynamic content and high interactivity. Several technologies have also evovlved to solve the problems that have arised from writing these complex/sophisticated web applications. In a bid to speed up development time, we tend to focus more on using these technologies to achieve results with little care for what goes on behind the scenes or under the hood. I have decided to do personal researches, share my experiences and explain different technologies I come across in my software development journey as a way to further reinforce my knowledge (I also encourage that other developers do this to have better understanding of the technologies they use).

Today I aim to explain 3 common storage options web browsers expose to web applications. We all (well, I mean developers) know the importance of data persistence for any software application, and web applications are not left out from this necessity. Web applications are usually written using Javascript (or any language which eventually gets converted to Javascript) which can be executed on the browser. The browser offers several options for data persistence which include Local storage, Session storage and Cookies which we shall learn about today.

It is commonly said that a picture is worth more than a thousand words, and I am a strong believer of this. With that said, I will not bore you any longer with more text but show below a tabular view showing the relationships/differences between the common browser storage options which I have mentioned earlier (Cookies, Local Storage, Session storage).

To futher explain the image above, I will discuss each section for those of us who also like to read and think along .

Capacity

• Cookies: Cookies only allow storage at a maximum capacity of 4kb per domain. If you try to store more data once this limit is reached you will encounter a/an... well I guess that's for you to findout.
• Sessoin Storage: The data storage limit for this storage option is 5mb. You can also go ahead to find out what happens when you exeed this limit.
• Local Storage: The local storage on the browser allows you store about 10mb of data. That's the largest allowed data storage availaible from these 3 options. What happens if you execeed this limit? Well, again, that's for you to find out.

HTML Version (Browser Support)

• Cookies: Cookies are supported by browsers which implement the HTML 4 and HTML 5 standards.
• Session Storage: Session storage is supported by browsers which implement HTML 5 standards alone.
• Local Storage: Local storage is supported by browsers which implement HTML 5 standards alone.

Accessibility

• Cookies: Cookies are accessible from any window (tab) currently opened on the browser.
• Session Storage: Session storage is only accessible from the same tab currently opened on the browser.
• Local Storage: Local storage is accessible from any window (tab) currently opened on the browser.

Expiration:

• Cookies: The expiration date for data stored as cookies are manually set (If no expiration date is set, the the cookie lives on as long as the browser is installed). To make a cookie expire, just set it's expiration date to the past (Cool right ).
• Session Storage: Data in the Session storage expires/disappears once the window (tab) on which it was set is closed.
• Local Storage: Data in the local storage remains as long as the browser remains installed. You have to manually clear data stored in Local storage (you can use Javascript for this or your browser developer tools if it has one).

Default Storage Location:
I know this sounds a bit weird since we should be focusing on storage on the client/browser, but trust me, this is also valid to note.

• Cookies: Cookies are stored on the client/browser and server. They are used to perform authentication between the client and server. You should probably dig more into that.
• Session Storage: Data in the session storage is only stored on the client/browser (but offcourse you can add this data to the payload sent to the server).
• Local Storage: Like Session storage, data in the Local storage is only stored on the client/browser and can also be added to the payload sent to the server.

There you have it, a break down of these common storage options for our frontend/client side applications. I hope I have been able to arouse you curiosity and that you have enjoyed the post. Thank you for staying with me through this journey and if you have any questions/contributions, please do post them so we can all enjoy the knowledge sharing.