Caching mechanisms in modern world browser

     


    Getting data locally is always faster than the getting data from server. There are different types of caching mechanism that can be used to cache data on browser for optimizing performance and faster data retrieval. We will see some of the data store that can be used on client to cache or store data.

1. Session Storages

    This is a very well-known storage on browser. Commonly uses to session specific data on this store. We can infer a current tab as one session. Session storage will not be available across tabs or new tab. Maximum limit of of session storage is 5MB.

    Limitations:

    It cannot use to persist information across tab or sessions

    It cannot store data more than 5MB.

    Data is not secure. Additional effort need to secure data stored

2. Local storage

    Local storage is also a very well-known storage. This is used to store data that can be used across tabs. This is main difference between session and local storage. You can persist data once browser closes as well.

Here, data size limit is same as that of session storage which is 5 MB. But local storages persists across tabs and after close of tab as well. 

    Limitation

    Cannot store data more than 5MB

    Data is not secure. Additional effort need to secure data stored

3. Index DB/Pouch DB

    IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This can be assumed as a data base for clients/browsers. These data store has larger capacity than local/session storage. So, user can cache comparatively large data or business objects. There is no known limit that I found on index db to store data.

    You can store the structured data similar to any conventional databases. Index DB store data and indexes that data for better retrieval performance. This enables faster search as well. Effort is required to write low level API to connect or leverage open source library which connect these databases. These provides mongo/sql like query. There are different persistence libraries which can be used along with Index DB like IndexedDB Promised or offline-persistence-toolkit.

    Limitations 

    Data stored is not secure. Additional encryption is needed if you want strong security.

    References

    https://www.w3.org/TR/IndexedDB/

    https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

    https://caniuse.com/indexeddb -> for multi browser support of index DB

    https://www.raymondcamden.com/2015/04/17/indexeddb-and-limits#:~:text=This%20limit%20(and%20the%20way,blobs%20bigger%20than%2050%20MB

    https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB

3. Static cache 

    This is default browser caching mechanism. You might be clearing cache in some instances, this is what you clear :) You can cache your REST or AJAX responses here as well. You need to use headers like cache-control and ETag along with AJAX.

    Reference

    https://developers.google.com/speed/docs/insights/LeverageBrowserCaching


4. Offline-persistence-toolkit

    This we saw in index DB caching above. This library provides the low-level implementation and abstraction to the communicate with Index DB or pouch DB. This is a recommended library for Oracle JET and Oracle Visual Builder.

    Reference

    https://docs.oracle.com/en/middleware/developer-tools/jet/9.2/develop/oracle-offline-persistence-toolkit.html

    https://github.com/oracle/offline-persistence-toolkit

    https://www.youtube.com/watch?v=TEmPMsCIs6s -> Demo video

 


Comments

Post a Comment

Popular posts from this blog

How to do AJAX using XMLHttpRequest for large data

Your are at right place if you are : working on loading huge amount of data from server be it JSON or XML document getting truncated JSON Response string  observing $.ajax call failure due to JSON.parse is compiling about invalid char while parsing JSON  observing performance lag while parsing JSON using $.ajax observing response code 200 but there is not response received in $.ajax success call  Uncaught InternalError: allocation size overflow in $.ajax If you are loading large data from server then you need to consider lot of factors impacting load time. There can be optimization on server as well as client. Coming to client, most commonly used API for AJAX is JQuery.ajax. But when it comes to fetching large data set from server be it in JSON format or XML document, you might end up facing issue mentioned at the beginning of this blog. I observed that in case of large JSON String in response, response string is being truncated. Also, if string is not truncated, JSON.par...
Read more

Polymorphism in Java OOP

Image
Polymorphism is word made from two words "Poly" which means many and "morph" means shape/form. Polymorphism means "ability to take multiple shapes or forms". In Java, method and Object both takes multiple forms. There are two forms of polymorphism : Compile time Polymorphism Run time Polymorphism Compile time polymerphism Compile time polymorphism is achieved using method overloading. Method will have same signaturre(name) but different parameters.This method is bound statically with method name and input parameter type hence static binding. Output : Display String Display int Runtime Polymorphism Method overriding is used to achieve Runtime polymorphism. Method will be overridden in subclass. This method is resolved depending on Object instance dynamically at runtime. Output : Display of Display Unit. Display of Monitor.
Read more